关于canvas的简单动画

线性动画：原理就是清空---绘制---清空---绘制  在俩次绘制的过程中，只需要改变绘制的起始点的一个坐标就行。代码如下

html代码：

<canvas id="c1" width="600" height="600" style="border:1px solid red"></canvas>

js代码：

    <canvas id="c1" width="600" height="600" style="border:1px solid red"></canvas>
    <script>
      var canvas = document.getElementById('c1')
      var ctx = canvas.getContext('2d')
      let radialGradient 
      let distance = -50
      const speed = 5

      const draw =(a)=>{
          ctx.clearRect(0,0,600,600)
        //   圆的中心点坐标distance,300
        //  10 50 俩个圆的半径
          radialGradient = ctx.createRadialGradient(distance,300,10,distance,300,50)
          radialGradient.addColorStop(0,"#FFFFFF")//开始的颜色
          radialGradient.addColorStop(1,"#EA7F26")//结束的颜色
          ctx.fillStyle = radialGradient 

          ctx.beginPath()
          ctx.moveTo(distance,300)
          ctx.arc(distance,300,50,0,Math.PI*2)
          ctx.fill()
          distance = distance + speed
          if(distance>=650){
              distance=-50
          }

          requestAnimationFrame(draw)

      }
      requestAnimationFrame(draw)

非线性动画：依然理就是清空---绘制---清空---绘制  在俩次绘制的过程中，但是需要改变绘制的起始点的两个坐标。（下面是一个圆周运动的简单动画的代码）

html代码：

<canvas id="c1" width="600" height="600" style="border:1px solid red"></canvas>

js代码：

var canvas = document.getElementById('c1')
        var ctx = canvas.getContext('2d')
        let radialGradient 
        let angle = 0
        let scope = 20
        let x = 300
        let y = 100
        var draw = (a)=>{
          ctx.clearRect(0,0,600,600)
          radialGradient = ctx.createRadialGradient(x,y,10,x,y,50)
          radialGradient.addColorStop(0,"black")
          radialGradient.addColorStop(0.25,"red")
          radialGradient.addColorStop(0.5,"blue")
          radialGradient.addColorStop(0.75,"yellow")
          radialGradient.addColorStop(1,"orange")
          ctx.fillStyle = radialGradient

          ctx.beginPath()
          ctx.moveTo(x,y)
          ctx.arc(x,y,50,0,2*Math.PI,false)
          ctx.fill()

         x = x + Math.cos(angle)*scope
         y = y + Math.sin(angle)*scope
         angle = angle+.1
         requestAnimationFrame(draw)
         ctx.closePath()
         ctx.beginPath()
         ctx.arc(300,300,200,0,2*Math.PI,false)
         ctx.stroke()
        }
        requestAnimationFrame(draw)