为什么 canvas fill() 不使用 fillStyle 中指定的颜色绘制形状？

Question

为什么 c.fillStyle 不给三角形上色？

var c= document.getElementById('myCanvas').getContext('2d');

//c.fillRect(20,10,250,175);//

c.moveTo(225,75);
c.lineTo(112.5,225);

c.moveTo(112.5,225);
c.lineTo(337.5,225);

c.moveTo(337.5,225);
c.lineTo(225,75);

c.strokeStyle= '#9e9e9e';
c.stroke();

c.fillStyle= '#ffc061';
c.fill();

Answer 1

因为在lineTo之后调用moveTo方法会通过跳转到新的当前位置来打破填充区域。您可以通过删除 moveTo 方法来解决此问题，如下所示：

c.moveTo(225,75);
c.lineTo(112.5,225);
c.lineTo(337.5,225);
c.closePath();

c.strokeStyle = '#9e9e9e';
c.stroke();

c.fillStyle = '#ffc061';
c.fill();