                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /Canvas绘图详解

fillStyle没效果

drawStar()函数中为什么设置fillStyle没效果，设置strokeStyle的颜色时表现为填充五角星？

qq_咫尺天涯_11

2016-07-13

源自：Canvas绘图详解 4-3

关注问题我要回答

1527

操作

收起

1 回答

灯元回答被采纳 +3 积分
2016-07-13

function drawStar(cxt,r,R,x,y,rot){
  cxt.beginPath();
    for(var i=0;i<5; i++){
  cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,
      -Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
  cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,
   -Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
   }
   cxt.closePath();

   cxt.strokeStyle="#fd5";
   cxt.lineWidth=3;
   cxt.fillStyle="#fd3";
   cxt.lineJoin="bevel";
   cxt.fill();
   cxt.stroke();

  }