vue+canvas动画例子协助同事搞了一个，是一个循环动画，具体效果，把下面的代码直接保存成html文件就可以看了，

协助同事搞了一个，是一个循环动画。
time = time+Math.abs(Math.sin(new Date().getMilliseconds()))0.05 这个来调整动画速度，
let angle = Math.abs(Math.sin(time+((i6-6)/i*6 )0.001i))*Math.PI 这个来调整动画的形状

图片.png

把下面的代码直接保存成html文件也可以看。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{ width: 100%;}
    #canvas{
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="600" height="600">
    <span>你的浏览器不支持 canvas，请升级你的浏览器。</span>
</canvas>
</body>
<script>
  let p = Math.PI
  
  /** @type {HTMLCanvasElement} */
  init();

  function init(){
    /** @type {HTMLCanvasElement} */
    var canvas = document.getElementById('canvas');   //  获取canvas标签
    var ctx = canvas.getContext('2d');  // 创建内容对象
    draw(ctx);
  }
  
  function draw(ctx){
    let time = new Date().getMilliseconds()
    requestAnimationFrame(function step(){
      drawArc(ctx,time)
      time = time+Math.abs(Math.sin(new Date().getMilliseconds()))*0.05
      requestAnimationFrame(step,time)
    })
  }

  function drawArc(ctx,time) {
    ctx.clearRect(0, 0, 300, 300)
    ctx.save()
    
    
    for (let i = 1; i <= 20; i++) {
      ctx.save()
      ctx.translate(150, 200)
      ctx.rotate(Math.PI)
      let angle = Math.abs(Math.sin(time+((i*6-6)/i*6 )*0.001*i))*Math.PI
      
      ctx.beginPath()
      ctx.strokeStyle = 'blue'
      ctx.lineWidth = 2
      // ctx.lineCap = 'round'
      ctx.arc(0, 0, i * 6, 0, angle)
      ctx.stroke()
      ctx.restore()
    }
  }

</script>
</html>