已经创建了 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
如何对两者应用不同的颜色?
最佳答案
您必须使用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();
关于javascript - Canvas 填充反射(reflect)在两个形状上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30170068/