为什么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

因为在moveTo之后调用lineTo方法会通过跳转到新的当前位置来打破填充区域。您可以通过删除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();