canvas画布随机变化运动球

leng啊

已于 2024-05-31 09:38:14 修改

阅读量160

点赞数 2

文章标签： javascript 前端

于 2024-05-30 16:30:29 首次发布

本文链接：https://blog.csdn.net/weixin_43722521/article/details/139327856

版权

随手写了一个canvas动画，随机变色，随机变化大小，随机角度运动球，撞墙自动回弹
效果如下图
感兴趣的可以下载玩玩
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
    <style>
      canvas {
        /* background-color: cadetblue; */
        margin: 0 auto;
        display: block;
      }
    </style>
  </head>
  <body>
    <script>
      //创建canvas
      var canvas = document.createElement("canvas");
      //设置宽高
      canvas.width = 600;
      canvas.height = 600;
      //把标签放入body
      document.body.append(canvas);
      //创建画笔
      var context = canvas.getContext("2d");

      class ball {
        constructor(xMax, yMax, ctx) {
          this.ctx = ctx;
          this.xMax = xMax;
          this.yMax = yMax;
          this.r = this.getRandomNum(5, 25);
          this.x = this.getRandomNum(this.r, this.xMax - this.r);
          this.y = this.getRandomNum(this.r, this.yMax - this.r);
          this.speed = this.getRandomNum(2, 5);
          this.radio = this.getRandomNum(0, 360);
          this.color = [
            this.getRandomNum(0, 255),
            this.getRandomNum(0, 255),
            this.getRandomNum(0, 255),
            Math.random(),
          ];
        }
        getRandomNum(min, max) {
          return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        draw() {
          this.ctx.beginPath();
          this.ctx.fillStyle = `rgba(${this.color[0]},${this.color[1]},${this.color[2]},${this.color[3]})`;
          this.ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
          this.ctx.fill();
          this.ctx.closePath();
        }
        changeColor() {}
        move() {
          const spendX = Math.cos((this.radio * Math.PI) / 180) * this.speed;
          const speedY = Math.sin((this.radio * Math.PI) / 180) * this.speed;

          if (this.x - this.r + spendX <= 0) {
            this.x = this.r;
            this.radio = 180 - this.radio;
          } else if (this.x + this.r + spendX >= this.xMax) {
            this.x = this.xMax - this.r;
            this.radio = 180 - this.radio;
          } else {
            this.x = this.x + spendX;
          }
          if (this.y - this.r + speedY <= 0) {
            this.y = this.r;
            this.radio = 360 - this.radio;
          } else if (this.y + this.r + speedY >= this.yMax) {
            this.y = this.yMax - this.r;
            this.radio = 360 - this.radio;
          } else {
            this.y = this.y + speedY;
          }
        }
      }

      context.clearRect(0, 0, canvas.width, canvas.height);

      let arr = [];
      for (let i = 0; i < 200; i++) {
        const b = new ball(canvas.width, canvas.height, context);
        b.change = change();
        arr.push(b);
        b.draw();
      }

      const move = function (b) {
        context.clearRect(0, 0, canvas.width, canvas.height);

        arr.map((v) => {
          v.move();
          v.change.call(v);
          v.draw();
        });

        requestAnimationFrame(() => {
          move(b);
        });
      };

      move();

      function change() {
        var s = [funcgetRandomNum(-1, 1), funcgetRandomNum(-1, 1), funcgetRandomNum(-1, 1)];
        var size = funcgetRandomNum(-1, 1);
        return function () {
          s.map((v) => {
            if (v > 0) {
              v = funcgetRandomNum(0, 10);
            } else {
              v = funcgetRandomNum(-10, 0);
            }
          });
          this.color.map((v, i) => {
            if (i < 3) {
              if (this.color[i] + s[i] < 0) {
                this.color[i] = 0;
                s[i] = -s[i];
              } else if (this.color[i] + s[i] > 255) {
                this.color[i] = 255;
                s[i] = -s[i];
              } else {
                this.color[i] = this.color[i] + s[i];
              }
            }
          });
          if (size > 0) {
            size = Math.random() / 10;
          } else {
            size = -Math.random() / 10;
          }
          if (this.r + size <= 5) {
            this.r = 5;
            size = -size;
          } else if (this.r + size >= 25) {
            this.r = 25;
            size = -size;
          } else {
            this.r = this.r + size
          }
        };
      }

      function funcgetRandomNum(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }
    </script>
  </body>
</html>