canvas跟随鼠标移动动画

最新推荐文章于 2024-05-21 23:21:19 发布

罗罗诺亚D路飞

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量156

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_72923430/article/details/134315919

版权

canvas动画就是一遍一遍的重绘需要对每次重绘的下一个位置进行计算

<!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>案例</title>
  <style>
    body {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      padding: 0;
      margin: 0;
    }

    #canvas {
      background-color: black;
    }
  </style>
</head>

<body>
  <canvas id="canvas"></canvas>
  <script>
    const can = document.getElementById("canvas")
    can.width = window.innerWidth
    can.height = window.innerHeight
    const ctx = can.getContext('2d')
    const m = {
      x: can.width / 2,
      y: can.height / 2
    }
    const arry = []
    function init() {
      for (let i = 0; i < 20; i++) {
        arry.push(new item(can.width, can.height))
      }
    }
    init()
    function item(x, y) {
      this.x = x
      this.y = y
      this.angle = Math.PI * 2 * Math.random()
      this.radius = Math.random() * 100
      this.color =`hsl(${Math.random()*360},50%,50%)`
        //绘画
        this.draw = function () {
          ctx.beginPath()
          ctx.strokeStyle = this.color
          ctx.moveTo(this.x, this.y)
          this.angle += 0.002
          this.x = m.x + Math.cos(this.angle) * this.radius
          this.y = m.y + Math.sin(this.angle) * this.radius
          ctx.lineTo(this.x, this.y)
          ctx.lineWidth = 5
          ctx.stroke()
          ctx.closePath()
        }
    }
    // let items = new item(200, 200)
    function animate() {
      requestAnimationFrame(animate)
      ctx.fillStyle = "rgba(0,0,0,0.05)"
      ctx.fillRect(0, 0, can.width, can.height)
      // items.draw()
      arry.forEach((items) => {
        items.draw()
      })
    }
    animate()
    window.onmousemove = function (e) {
      m.x = e.clientX
      m.y = e.clientY
    }
  </script>

</body>

</html>