javascript - Canvas 填充反射(reflect)在两个形状上

Question

已经创建了 2 个 Canvas 形状，

想要在两个形状中填充不同的颜色。然而，第二个形状的颜色变化也会反射(reflect)在第一个形状中。

这是我的代码

//Drawing 1st triangle color #FFCC000 Triangle
ctx.moveTo(rectX - 100, rectY);
ctx.lineTo(rectX, rectY - 100);
ctx.lineTo(rectX, rectY);
ctx.stroke();
ctx.fillStyle = "#FFCC00";
ctx.fill();

//Drawing  2nd Triangle - color #CC00CC 
    ctx.moveTo(rectX+220, rectY);
    ctx.lineTo(rectX+220, rectY - 100);
    ctx.lineTo(rectX+300, rectY);
    ctx.stroke();
    ctx.fillStyle = "#CC00CC";
    ctx.fill();

如果我只画 1 个三 Angular 形，它会反射(reflect)正确的颜色。然而，当显示两个三 Angular 形时，它们都采用第二个三 Angular 形的颜色#CC00CC

如何对两者应用不同的颜色？

Answer 1

您必须使用closePath和beginPath:

ctx.beginPath();
ctx.moveTo(rectX - 100, rectY);
ctx.lineTo(rectX, rectY - 100);
ctx.lineTo(rectX, rectY);
ctx.closePath();
ctx.stroke();
ctx.fillStyle = "#FFCC00";
ctx.fill();

ctx.beginPath();
//Drawing  2nd Traingle - color #CC00CC 
ctx.moveTo(rectX+220, rectY);
ctx.lineTo(rectX+220, rectY - 100);
ctx.lineTo(rectX+300, rectY);
ctx.closePath();
ctx.stroke();
ctx.fillStyle = "#CC00CC";
ctx.fill();

DEMO