用Canvas画出你的专属浪漫雪花世界

2024-01-25 15:01:51

在计算机图形学中，canvas是一个矩形区域，用作图像的容器。它允许你通过JavaScript直接对图像进行控制，从而可以创建动画和交互式图形。

使用canvas来模拟雪花飘落的动画效果，可以使我们在浏览器中创建出一个美妙的冬季场景。下面，我们就一起来实现这个效果。

创建一个canvas元素

<canvas id="canvas" width="800" height="600"></canvas>

获取canvas上下文

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

创建雪花类

class Snowflake {
  constructor(x, y, radius) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.speedX = Math.random() * 5;
    this.speedY = Math.random() * 5;
  }

  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    ctx.fillStyle = "white";
    ctx.fill();
  }

  update() {
    this.x += this.speedX;
    this.y += this.speedY;

    if (this.x > canvas.width || this.x < 0) {
      this.speedX = -this.speedX;
    }

    if (this.y > canvas.height || this.y < 0) {
      this.speedY = -this.speedY;
    }
  }
}

创建雪花数组

var snowflakes = [];
for (var i = 0; i < 100; i++) {
  var snowflake = new Snowflake(
    Math.random() * canvas.width,
    Math.random() * canvas.height,
    Math.random() * 3
  );
  snowflakes.push(snowflake);
}

绘制雪花

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (var i = 0; i < snowflakes.length; i++) {
    snowflakes[i].draw();
    snowflakes[i].update();
  }

  requestAnimationFrame(draw);
}