更改笔触颜色

打然后我想改变行程的颜色，当我点击一个颜色选择

$("button").click(function() 
{ 
    console.log("click"); 
    stroke_color = "#0000FF"; 
});

会发生什么情况是，如果在画布上点击一下，我会看到新的颜色，但是如果我开始移动鼠标来制作一条线，那么笔画的颜色就是我首先定义的颜色。

如何动态更改颜色？

这里给fiddle链接操作（虽然我没有做它的工作）

HTML

<button> 
change color! 
</button> 
<div id="main"> 
    <canvas id="canvas"></canvas> 
</div>

var stroke_color = "#FF0000"; 

    $("button").click(function() 
    { 
    console.log("click"); 
    stroke_color = "#0000FF"; 
    }); 

    var canvas = document.querySelector('#canvas'); 
    var ctx = canvas.getContext('2d'); 

    var sketch = document.querySelector('#main'); 
    var sketch_style = getComputedStyle(sketch); 
    canvas.width = parseInt(sketch_style.getPropertyValue('width')); 
    canvas.height = parseInt(sketch_style.getPropertyValue('height')); 


    // Creating a tmp canvas 
    var tmp_canvas = document.createElement('canvas'); 
    var tmp_ctx = tmp_canvas.getContext('2d'); 
    tmp_canvas.id = 'tmp_canvas'; 
    tmp_canvas.width = canvas.width; 
    tmp_canvas.height = canvas.height; 

    sketch.appendChild(tmp_canvas); 

    var mouse = {x: 0, y: 0}; 
    var last_mouse = {x: 0, y: 0}; 

    // Pencil Points 
    var ppts = []; 

    /* Mouse Capturing Work */ 
    tmp_canvas.addEventListener('mousemove', function(e) { 
     mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX; 
     mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY; 
    }, false); 


    /* Drawing on Paint App */ 
    tmp_ctx.lineWidth = 5; 
    tmp_ctx.lineJoin = 'round'; 
    tmp_ctx.lineCap = 'round'; 
    tmp_ctx.strokeStyle = stroke_color; 
    tmp_ctx.fillStyle = stroke_color; 

    tmp_canvas.addEventListener('mousedown', function(e) { 
     tmp_canvas.addEventListener('mousemove', onPaint, false); 

     mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX; 
     mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY; 

     ppts.push({x: mouse.x, y: mouse.y}); 

     onPaint(); 
    }, false); 

    tmp_canvas.addEventListener('mouseup', function() { 
     tmp_canvas.removeEventListener('mousemove', onPaint, false); 

     // Writing down to real canvas now 
     ctx.drawImage(tmp_canvas, 0, 0); 
     // Clearing tmp canvas 
     tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height); 

     // Emptying up Pencil Points 
     ppts = []; 
    }, false); 

    var onPaint = function() { 

     // Saving all the points in an array 
     ppts.push({x: mouse.x, y: mouse.y}); 

     if (ppts.length < 3) { 
      var b = ppts[0]; 
      tmp_ctx.beginPath(); 
      //ctx.moveTo(b.x, b.y); 
      //ctx.lineTo(b.x+50, b.y+50); 
      tmp_ctx.arc(b.x, b.y, tmp_ctx.lineWidth/2, 0, Math.PI * 2, !0); 
      tmp_ctx.fill(); 
      tmp_ctx.closePath(); 

      return; 
     } 

     // Tmp canvas is always cleared up before drawing. 
     tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height); 

     tmp_ctx.beginPath(); 
     tmp_ctx.moveTo(ppts[0].x, ppts[0].y); 

     for (var i = 1; i < ppts.length - 2; i++) { 
      var c = (ppts[i].x + ppts[i + 1].x)/2; 
      var d = (ppts[i].y + ppts[i + 1].y)/2; 

      tmp_ctx.quadraticCurveTo(ppts[i].x, ppts[i].y, c, d); 
     } 

     // For the last 2 points 
     tmp_ctx.quadraticCurveTo(
      ppts[i].x, 
      ppts[i].y, 
      ppts[i + 1].x, 
      ppts[i + 1].y 
     ); 
     tmp_ctx.stroke(); 

    };

来源

2016-02-13 Matías Cánepa

设置笔触样式改变了一切的颜色，你事后抽奖。

但是，在您的应用程序中，您将所有坐标存储在一个数组中，并且当用户进行更改时，您将删除图像并重新绘制所有存储的点。

我建议您在添加它们时将当前颜色与坐标一起存储。

ppts.push({x: mouse.x, y: mouse.y, color:stroke_color});

然后在for循环中设置tmp_ctx.strokeStyle存储于该点的颜色，你画线之前你的OnPaint功能：

for (var i = 1; i < ppts.length - 2; i++) { 
     var c = (ppts[i].x + ppts[i + 1].x)/2; 
     var d = (ppts[i].y + ppts[i + 1].y)/2; 

     tmp_ctx.strokeStyle = ppts[i].color; 
     tmp_ctx.quadraticCurveTo(ppts[i].x, ppts[i].y, c, d); 
    }

来源

2016-02-13 23:25:08 Philipp

更改笔触颜色

回答

相关问题