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

看看这个例子

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Red rectangle
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.rect(5, 5, 290, 140); 
ctx.stroke();

// Green rectangle
ctx.beginPath();
ctx.lineWidth = "4";
ctx.strokeStyle = "green";
ctx.rect(30, 30, 50, 50);
ctx.stroke();

<canvas id="myCanvas" width="300" height="150">

Answer 2

诀窍是你只需要在创建第二个方格之前调用context.beginPath()。

虽然不是严格要求，但您也应该使用context.closePath()完全关闭路径（在 context.stroke()之前称为）。

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

＆＃13;
＆＃13;
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();
＆＃13;
<canvas id="canvas" width="150" height="100" style="border:1px solid #000000;"> </canvas>
＆＃13;
＆＃13;
＆＃13;

希望这有帮助！：）

画在不同颜色的画布矩形上

2 个答案: