和老婆一起欣赏Canvas实现的璀璨烟花雨

前端

2023-09-10 11:38:00

在家见证浪漫烟花雨：用Canvas点亮你的国庆假期

在这个充满爱意的国庆假期里，没有什么比和心爱的妻子一起欣赏一场绚烂的烟花雨更浪漫的了。然而，现实中总有诸多限制，让我们无法亲临盛会现场。但不要沮丧！借助现代科技的力量，我们可以在家中也能欣赏到由Canvas实现的璀璨烟花雨，尽享甜蜜时刻。

重温三角函数：构建烟花雨的基础

在开启烟花雨之旅之前，让我们回顾一下初中阶段的三角函数知识。

正弦函数和余弦函数： 它们了直角三角形中锐角的正切值和余切值。
正切函数和余切函数： 它们表示锐角的正弦值和余弦值。
周期性和对称性： 三角函数具有周期性和对称性，在图形上呈现出规律的图案。

掌握这些知识将为我们使用Canvas创建烟花雨效果奠定坚实的基础。

踏上编程之旅：用代码点亮烟花

现在，让我们踏上编程之旅，用代码点亮烟花。首先，我们需要创建Canvas元素：

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

然后，获取Canvas元素的上下文：

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

接下来，定义一些变量来存储烟花雨的属性：

var particles = [];
var gravity = 0.1;
var wind = 0.01;

一切就绪，我们就可以绘制烟花了！

function draw() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制烟花粒子
  for (var i = 0; i < particles.length; i++) {
    var particle = particles[i];

    // 更新粒子位置
    particle.x += particle.vx + wind;
    particle.y += particle.vy + gravity;

    // 绘制粒子
    ctx.fillStyle = particle.color;
    ctx.fillRect(particle.x, particle.y, 2, 2);
  }

  // 删除超出画布范围的粒子
  for (var i = particles.length - 1; i >= 0; i--) {
    var particle = particles[i];
    if (particle.x < 0 || particle.x > canvas.width || particle.y < 0 || particle.y > canvas.height) {
      particles.splice(i, 1);
    }
  }

  // 随机创建新粒子
  if (Math.random() < 0.05) {
    createParticle();
  }

  // 刷新画布
  requestAnimationFrame(draw);
}

// 创建新粒子
function createParticle() {
  var particle = {
    x: Math.random() * canvas.width,
    y: canvas.height,
    vx: (Math.random() - 0.5) * 5,
    vy: -Math.random() * 10,
    color: "red"
  };

  particles.push(particle);
}

// 启动动画
draw();