Html5 canvas HTML5画布样式泄漏

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

编辑同时添加以下脚本：

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

---

如果需要，您必须启动一个新路径-

。stroke

不会自动执行此操作：

---

当前，该路径由第二行扩展，因此新路径由两行组成。首先抚摸顶行绿色，然后延伸路径并抚摸路径蓝色（现在由两条线组成）。很明显，绿线已被“覆盖”。

第一条条形图为绿色，但随后变为蓝色

如图所示

//draw blue line
ctx.beginPath();

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