canvas动态风车

 该风车绘制的核心方法：arcTo() ，一开始还想用arc(),想了半天无法确定旋转的原点坐标，后来发现方法选错了。

思路：

1、动态效果：绘制一个画面，清除后，再绘制角度改变后的画面。j：为每次整体旋转角度

2、多瓣效果：将画布原点作为每瓣图形的起始点，再旋转一定角度，做出多瓣

<canvas width="300px" height="300px" id="canvas02">
    浏览器不支持canvas
 </canvas>

    let canvas2 = document.querySelector("#canvas02")
    canvas2.style.backgroundColor = "#eee"
    function draw02(){
      let ctx = canvas2.getContext("2d")
      let j = 0;

      function startWindmill(){
        //清除上一次画面，重新绘制
        ctx.clearRect(0,0,300,300)

        //创建6瓣风车
        for(let i=0;i<6;i++){
          //保存目前状态
          ctx.save()
          //移动画布原点
          ctx.translate(150,150)
          drawWindmill(i)
          //还原到原有状态。原点 0,0、角度0时
          ctx.restore()
        }

        function drawWindmill(i){
          let angle = (i*60)+j
          ctx.beginPath()
          ctx.rotate(Math.PI*angle/180)
          ctx.moveTo(0,0)
          ctx.arcTo(50,0,50,50,50)   //风车的关键
          ctx.fillStyle = `rgb(255,${i*40},0)`
          ctx.fill()
        }
        j = j===340 ? 0 : j+20
      }
      /*
      * 旋转速度100ms
      */
      setInterval(()=>{
        startWindmill()
      },100)
    }
    draw02()

 arcTo()方法图例，参考网站链接：学习 HTML5 Canvas 这一篇文章就够了 | 菜鸟教程