javascript - 了解 HTML5 Canvas 元素

Question

我阅读了大量有关保存/恢复 Canvas 状态的文档，但仍然对下一个 example 感到困惑.

function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');

    // save default state
    ctx.save();

    // draw new arc with new settings
    ctx.lineWidth = 2;
    ctx.fillStyle = '#bfb';
    ctx.strokeStyle = '#999';
    ctx.beginPath();
    ctx.arc(50, 50, 10, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    // restore default state
    ctx.restore();

    // save default state again
    ctx.save();
    // draw line with new settings
    ctx.lineWidth = 4;
    ctx.strokeStyle = '#000';
    ctx.moveTo(50, 50);
    ctx.lineTo(100, 100);
    ctx.stroke();
    // restore default state
    ctx.restore();

    // save default state third time
    ctx.save();
    // draw round circle with new settings
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#999';
    ctx.arc(100, 100, 10, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fillStyle = '#bfb';
    ctx.fill();
    ctx.stroke();
    // restore default state
    ctx.restore();
}

draw();

我的逻辑在代码注释中，但结果绝对不是预期的。第一个圆圈有一个来自线条的设置。圆圈应具有与线条不同的样式。

Answer 1

我还不擅长 Canvas ，但我认为有一些基本的学习在开始绘制路径之前，您缺少 ctx.beginPath();。

function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');

    // save default state
    ctx.save();

    // draw new arc with new settings
    ctx.lineWidth = 2;
    ctx.fillStyle = '#bfb';
    ctx.strokeStyle = '#999';
    ctx.beginPath();
    ctx.arc(50, 50, 10, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    // restore default state
    ctx.restore();

    // save default state again
    ctx.save();
    // draw line with new settings
    ctx.beginPath();
    ctx.lineWidth = 4;
    ctx.strokeStyle = '#000';
   ctx.moveTo(50, 50);
     ctx.lineTo(100, 100);
    ctx.stroke();
    // restore default state
   ctx.restore();

    // save default state third time
    ctx.save();
    // draw round circle with new settings
    ctx.beginPath();    /* ** THIS is missing in your code ** */
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#999';
    ctx.arc(100, 100, 10, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fillStyle = '#bfb';
    ctx.fill();
    ctx.stroke();
    // restore default state
    ctx.restore();
}

draw();

<强> DEMO

<强> SOURCE