javascript - 在 Canvas 上绘制不同颜色的矩形

Question

我正在尝试绘制两个不同颜色的矩形:

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.beginPath();
context.drawImage(this,0,0);
context.beginPath();
context.rect(left1,top1,width1,height1);
context.lineWidth = 8;
context.strokeStyle = 'red';
context.stroke();
context.rect(left2,top2,width2,height2);
context.lineWidth = 8;
context.strokeStyle = 'green';
context.stroke();

但两者的颜色相同(绿色，这是选择的第二种颜色)。

我想 stroke 没有按照我的预期去做。

我在这里错过了什么？

Answer 1

诀窍在于您只需在创建第二个方 block 之前调用 context.beginPath()。

虽然不是严格需要，但您也应该使用 context.closePath() 完全关闭您的路径(称为 before context.stroke() )。

我已将 context.beginPath() 和 context.closePath() 添加到以下示例中:

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
//context.beginPath();
//context.drawImage(this, 0, 0);
context.beginPath();
context.rect(30, 30, 30, 30); /* Modified */
context.lineWidth = 8;
context.strokeStyle = 'red';
context.closePath();
context.stroke();
context.beginPath(); /* Added */
context.rect(80, 30, 30, 30); /* Modified */
context.lineWidth = 8;
context.strokeStyle = 'green';
context.closePath();
context.stroke();

<canvas id="canvas" width="150" height="100" style="border:1px solid #000000;">
</canvas>

希望对您有所帮助! :)