为什么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();