canvas鼠标特效

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
</head>

<body>
  <script>
    let stars = []

    // 配置
    const config = {
      color: false, // 图案颜色, 如果为false则使用随机颜色
      size: 0, // 图案大小, 如果为0则使用随机大小
      o: 1, // 递减值，数值越大图案消失越快
      orange: 30, // 图案分散程度
      opacity: 0.5, // 图案透明度，取值 0-1之间,在颜色随机的情况下有效
    }

    function random(max = 1, min = 0) {
      return parseInt(Math.random() * (max - min)) + min;
    }

    function renderStars(ctx, x, y, size, color) {
      let R = size
      let r = size / 2.5
      //设置是个顶点的坐标，根据顶点制定路径   
      ctx.beginPath()
      for (var i = 0; i < 5; i++) {
        ctx.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * R + x,
          -Math.sin((18 + i * 72) / 180 * Math.PI) * R + y);
        ctx.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * r + x,
          -Math.sin((54 + i * 72) / 180 * Math.PI) * r + y);
      }
      ctx.closePath()
      ctx.strokeStyle = color
      ctx.stroke()
    }

    window.onmousemove = e => {
      stars.push({
        color: config.color || `rgba(${random(250, 50)}, ${random(240, 0)}, ${random(255, 200)}, ${config.opacity})`,
        x: e.clientX + random(config.orange),
        y: e.clientY + random(config.orange),
        size: config.size || random(20) + 5,
        orange: config.orange,
      })
    }

    function animateTwo(ctx, width, height) {
      ctx.clearRect(0, 0, width, height)
      for (let i = 0; i < stars.length; i++) {
        let item = stars[i]
        item.size -= config.o
        if (item.size <= 0) {
          stars.splice(i, 1)
          i--
        }
        renderStars(ctx, item.x, item.y, item.size, item.color)
      }
      requestAnimationFrame(animateTwo.bind(this, ctx, width, height))
    }

    window.onload = function () {
      const width = document.documentElement.clientWidth
      const height = document.documentElement.clientHeight
      const cvs2 = document.createElement('canvas')
      document.body.appendChild(cvs2)
      const ctx2 = cvs2.getContext('2d')
      cvs2.style.zIndex = 200;
      cvs2.style.position = 'fixed'
      cvs2.style.top = 0;
      cvs2.style.left = 0
      cvs2.style.right = 0
      cvs2.style.bottom = 0
      cvs2.style.pointerEvents = 'none'
      cvs2.width = width;
      cvs2.height = height;
      animateTwo(ctx2, width, height)
    }
  </script>
</body>

</html>
猜你喜欢
