To realize the sample

Complete code

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    canvas{
      border:1px solid # 000;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas" width="800" height="600"></canvas>
  <script>
    let canvas = document.getElementById('myCanvas')
    let ctx = canvas.getContext('2d')
    let w = canvas.width , h = canvas.height
    const step = 0.2
    function print(ctx,lineWidth,x,y,r,colors,deg){
      let startAngle = 0 
      let endAngle = 2 * Math.PI  * deg


      ctx.lineWidth = 10
      ctx.lineCap = 'round'

      let stepTime = (endAngle - startAngle) / step

      let colorObj = getStepColor(colors,stepTime)
      let startColor = colors[0]
      let startRGB = colorRgb(colors[0])
      let endRGB = colorRgb(colors[1])
      // The number of cycles
      for(let i=1; i<=stepTime; i++){ ctx.beginPath()let color = `rgb(The ${parseInt(startRGB[0] + i * colorObj.colorR)}.The ${parseInt(startRGB[1] + i * colorObj.colorG)}.The ${parseInt(startRGB[2] + i * colorObj.colorB)}) `
        ctx.strokeStyle = color
        ctx.arc(x,y,r,startAngle,startAngle + step,false)
        ctx.stroke()
        startAngle += step
      }
    }

    // Generate intervals for each color
    function getStepColor(colors,step){
      if(colors && ! colors.length){return false
      }
      if(step == 0) {return false
      }
      let startColor = colors[0]
      let endColor = colors[1]

      let startColor_rgb = colorRgb(startColor)
      let endColor_rgb = colorRgb(endColor)
      let colorR = (endColor_rgb[0] - startColor_rgb[0])? (endColor_rgb[0] - startColor_rgb[0]) / step : 0
      let colorG = (endColor_rgb[1] - startColor_rgb[1])? (endColor_rgb[1] - startColor_rgb[1]) / step : 0
      let colorB = (endColor_rgb[2] - startColor_rgb[2])? (endColor_rgb[2] - startColor_rgb[2]) / step : 0
      return {step,colorR,colorG,colorB}
    }
    
    // Convert hexadecimal to hexadecimal RGB
    function colorRgb(color){
      let colors = []
      for(let i=1; i<7; i+=2){
        colors.push(
          parseInt(`0x${color.slice(i,i+2)}`))}return colors
    }
    
    let a  = 0.1
    let start = 0 , end = 1
    ctx.translate(w/2,h/2)
    ctx.rotate(-90 * Math.PI / 180)
    
    function move(){
      window.requestAnimationFrame(move)
      ctx.clearRect(0.0,w,h)
      let v = (end - start) * a
      start += v
      if(start >= 0.999){
        start = 1
      }
      print(ctx,20.0.0.100['#ff6464'.'#3586ff'], start)
    }
    move()
  </script>
</body>
</html>
Copy the code

Steps:

  • Complete the gradient on the arc
    • Basically, each short arc corresponds to a color
  • Complete the slow animation
    • The main thing is that the distance that you move each time is one tenth of the difference between the start and end