点燃创意烟花，照亮编程艺术星空

2023-11-18 17:07:11

在点燃烟花的一瞬间，缤纷的色彩在天空中绽放，令人目不暇接，而这绚烂的烟花背后，也蕴藏着编程的奥秘。使用canvas实现可视化是目前前端的一个方向，本文将基于实现一个烟花，带大家感受一下canvas的魅力，花费20分钟的时间就可以了解在绘制动画过程中的一些基础手段以及优化点，赶紧学起来。

一、认识canvas

canvas是一个HTML5元素，它允许我们通过脚本在网页上绘制图形。它使用JavaScript的绘图API来控制画笔的形状、颜色和位置，从而实现各种图形的绘制。

二、绘制烟花

创建画布

首先，我们需要创建一个canvas元素，并将其添加到HTML页面中。然后，使用JavaScript获取canvas元素的上下文，以便我们可以开始绘制图形。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

绘制烟花背景

在绘制烟花之前，我们需要先绘制一个背景，这样烟花才会有一个衬托。我们可以使用fillRect()方法来填充整个画布。

ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);

绘制烟花粒子

烟花是由许多小粒子组成的，因此我们需要先创建一个函数来绘制烟花粒子。这个函数将接受粒子的位置、速度和颜色作为参数，并使用beginPath()、moveTo()、lineTo()和stroke()方法来绘制粒子。

function drawParticle(x, y, vx, vy, color) {
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x + vx, y + vy);
  ctx.strokeStyle = color;
  ctx.stroke();
}

绘制烟花

现在，我们可以使用drawParticle()函数来绘制烟花。我们可以先创建一个数组来存储烟花粒子，然后使用循环来绘制每个粒子。

let particles = [];

function drawFirework() {
  for (let i = 0; i < particles.length; i++) {
    const particle = particles[i];
    drawParticle(particle.x, particle.y, particle.vx, particle.vy, particle.color);
    particle.x += particle.vx;
    particle.y += particle.vy;
    if (particle.x < 0 || particle.x > canvas.width || particle.y < 0 || particle.y > canvas.height) {
      particles.splice(i, 1);
    }
  }
}

动画循环

为了让烟花动起来，我们需要使用requestAnimationFrame()函数来创建一个动画循环。这个函数会每隔一段时间调用我们提供的回调函数，从而让烟花不断地更新。

function animate() {
  requestAnimationFrame(animate);
  drawFirework();
}

animate();

三、优化

减少粒子数量

烟花粒子数量过多会导致性能下降，因此我们需要控制粒子的数量。我们可以通过减少烟花发射的频率来减少粒子的数量。

let particleCount = 100;

function drawFirework() {
  if (particles.length < particleCount) {
    for (let i = 0; i < 10; i++) {
      const x = Math.random() * canvas.width;
      const y = Math.random() * canvas.height / 2;
      const vx = (Math.random() - 0.5) * 10;
      const vy = (Math.random() - 0.5) * 10;
      const color = '#' + Math.floor(Math.random() * 16777215).toString(16);
      particles.push({x, y, vx, vy, color});
    }
  }
  ...
}

使用复合操作

复合操作可以将多个绘制操作合并成一个操作，从而提高性能。我们可以使用globalCompositeOperation属性来设置复合操作。

ctx.globalCompositeOperation = 'lighter';

使用离屏画布

离屏画布是一个不显示在页面上的画布，我们可以先在离屏画布上绘制图形，然后再将其复制到主画布上。这可以减少重绘的次数，从而提高性能。

const offscreenCanvas = document.createElement('canvas');
const offscreenCtx = offscreenCanvas.getContext('2d');

...

offscreenCtx.fillStyle = '#000';
offscreenCtx.fillRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);

...

ctx.drawImage(offscreenCanvas, 0, 0);