canvas练习-炫彩小球

最新推荐文章于 2021-09-14 17:59:58 发布

原创最新推荐文章于 2021-09-14 17:59:58 发布 · 148 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用HTML5 Canvas实现的交互式动画效果。当鼠标在画布上移动时，会在鼠标位置生成彩色圆形，并随着时间推移逐渐缩小直至消失。通过自定义Circle类实现了圆形的动态创建、更新和渲染。

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="myCanvas" width="600" height="400"></canvas>

    <script>
      var myCanvas = document.getElementById("myCanvas");
      var ctx = myCanvas.getContext("2d");
      var circleList = new Map();
      var uid = 0;

      class Circle {
        constructor(x, y) {
          this.x = x;
          this.y = y;
          this.uid = uid;
          this.color = this.getRandomColor();
          this.r = Math.ceil(Math.random() * 20);
          let dx = parseInt(Math.random() * 10);
          let dy = parseInt(Math.random() * 10);
          this.dx = Math.random() > 0.5 ? -dx : dx;
          this.dy = Math.random() > 0.5 ? -dy : dy;
          circleList.set(uid, this);
          uid++;
        }

        getRandomColor() {
          return `rgba(${Math.round(Math.random() * 255)},${Math.round(
            Math.random() * 255
          )},${Math.round(Math.random() * 255)}, ${Math.random().toFixed(2)})`;
        }

        update() {
          this.x += this.dx;
          this.y += this.dy;
          this.r -= 0.2;
        }

        render() {
          if (this.r < 0) {
            return;
          }
          ctx.beginPath();
          ctx.fillStyle = this.color;
          try {
            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
          } catch (e) {
            debugger;
          }
          ctx.fill();
          ctx.closePath();
        }
      }

      myCanvas.addEventListener("mousemove", function (e) {
        let { offsetX, offsetY } = e;
        new Circle(offsetX, offsetY);
      });

      setInterval(function () {
        ctx.clearRect(0, 0, 600, 400);
        for (let [key, value] of circleList) {
          if (value.r > 0) {
            value.update();
            value.render();
          } else {
            circleList.delete(key);
          }
        }
      }, 30);
    </script>
  </body>
</html>