html5-canvas - HTML 5 Canvas 样式泄漏

Question

下面的 URL 中有一个小示例，它画了两条线。我希望顶线是绿色，底部是蓝色。但它们都是蓝色的。为什么？

http://jsfiddle.net/rj8Ab/

编辑 也添加下面的脚本：

var canvas = document.getElementById('canvas');
canvas.width = 500;
canvas.height = 500;

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

ctx.globalAlpha = 1;
ctx.globalCompositeOperation = "source-over";

var x1=10, y1=10, width=100, height=100;

ctx.lineWidth = "5";

//draw green line
ctx.strokeStyle = "#00FF00";
ctx.moveTo(x1 + 1, y1 + 1);
ctx.lineTo(x1 + width - 2, y1 + 1);
ctx.stroke();

//draw blue line
ctx.strokeStyle = "#0000FF";
ctx.moveTo(x1 + 1, y1 + 10);
ctx.lineTo(x1 + width - 2, y1 + 10);
ctx.stroke();

Answer 1

如果您愿意，您必须开始一条新路径 -.stroke不会自动执行此操作：http: //jsfiddle.net/rj8Ab/2/。

//draw blue line
ctx.beginPath();

目前路径是用第二行扩展的，所以新路径由两行组成。您首先抚摸顶线绿色，然后延伸路径并抚摸路径蓝色（现在由两条线组成）。显然绿线已被“覆盖”。

Answer 2

第一个条被绘制为绿色，但随后变为蓝色。

如www.williammalone.com所见

//draw green line
ctx.beginPath();
ctx.moveTo(x1 + 1, y1 + 1);
ctx.lineTo(x1 + width - 2, y1 + 1);
ctx.closePath();
ctx.strokeStyle = "#00FF00";
ctx.stroke();
//draw blue line
ctx.beginPath();
ctx.moveTo(x1 + 1, y1 + 10);
ctx.lineTo(x1 + width - 2, y1 + 10);
ctx.closePath();
ctx.strokeStyle = "#0000FF";
ctx.stroke();