canvas画布demo

最新推荐文章于 2023-06-13 17:33:41 发布

请叫我盒饭

最新推荐文章于 2023-06-13 17:33:41 发布

阅读量132

点赞数 1

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_50329459/article/details/129756438

版权

canvas画布demo

<!DOCTYPE html>
<html>
  <head>
    <title>demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        height: 100vh;
      }

      canvas {
        display: block;
      }
    </style>
  </head>

  <body>
    <canvas id="canvas"></canvas>

    <script>
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");
      let sakuraArray = [];

      // 创建樱花对象
      class Sakura {
        constructor() {
          this.x = Math.random() * canvas.width;
          this.y = Math.random() * -canvas.height;
          this.size = Math.random() * 10 + 10;
          this.speed = 1.5; // 设置较小的速度
          this.angle = Math.random() * 45 + 45; // 设置固定的角度
          this.drift = Math.random() * -2.5 - 1.25; // 设置往左漂移
          this.alpha = 1;

          // 创建一个樱花图片对象
          this.img = new Image();
          this.img.src = "./yinghua.png";//本地图片路径
        }

        // 更新樱花位置和透明度
        update() {
          this.y += this.speed;
          this.x += this.drift;
          this.alpha -= 0.005; // 调整透明度变化的速度
        }

        // 绘制樱花
        draw() {
          ctx.save();
          ctx.translate(this.x, this.y);
          ctx.rotate((this.angle * Math.PI) / 180);
          ctx.globalAlpha = this.alpha;
          ctx.drawImage(this.img, -this.size / 2, -this.size / 2, this.size, this.size);
          ctx.restore();
        }
      }

      // 创建樱花
      function createSakura() {
        sakuraArray.push(new Sakura());
      }

      // 创建多个樱花
      function createSakuraMulti(count) {
        for (let i = 0; i < count; i++) {
          createSakura();
        }
      }

      // 绘制多个樱花
      function drawSakuraMulti() {
        for (let i = 0; i < sakuraArray.length; i++) {
          sakuraArray[i].update();
          sakuraArray[i].draw();
          if (sakuraArray[i].alpha <= 0) {
            sakuraArray.splice(i, 1);
            createSakura();
          }
        }
      }

      // 初始化函数
      function init() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        createSakuraMulti(50); // 少一些樱花
      }

      // 监听浏览器窗口大小变化事件
      window.addEventListener("resize", function () {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
      });

      // 主循环函数
      function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawSakuraMulti();
        requestAnimationFrame(animate);
      }

      // 启动
  // 启动
  init();
  animate();
</script>