javascript - 在 HTML5 Canvas 中更改描边颜色

Question

我是 HTML5 Canvas 的新手，我正在玩 this example

然后我想在单击颜色选择器时更改描边的颜色

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

发生的情况是，如果在 Canvas 上单击我会看到新颜色，但如果我开始移动鼠标来画一条线，那么描边的颜色就是我首先定义的颜色。

如何动态改变颜色？

这是 fiddle 的链接(虽然我没有让它工作)

HTML

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

JS

  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();

    };

Answer 1

设置笔触样式会改变您之后绘制的所有内容的颜色。

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

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

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

然后在 onPaint 函数的 for 循环中将 tmp_ctx.strokeStyle 设置为在绘制线条之前为该点存储的颜色:

    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);
    }