drawImage开启花瓣纷飞的舞会：打造灵动动画效果

2023-10-15 17:35:24

花瓣随风飘舞的诗意画卷：运用drawImage创作花瓣散落动画

在数字艺术的画布上，animation动画如同一位灵动的舞者，挥洒着色彩与律动，为我们的视觉盛宴增添无限可能。而canvas，作为HTML5的原生元素，则为我们提供了挥舞画笔的舞台，让我们得以用代码勾勒出动态的奇幻世界。今天，我们就将canvas与drawImage携手，共同奏响一曲花瓣纷飞的诗意乐章。

绘制画布：构筑动画的舞台

如同画家构筑画布，我们的canvas舞台也需悉心准备。首先，我们使用JavaScript创建一个canvas元素：

const canvas = document.createElement("canvas");

随后，指定canvas的宽高，为花瓣的飞舞预留足够的空间：

canvas.width = 600;
canvas.height = 400;

加载花瓣图像：动画的灵魂

花瓣作为动画的主角，我们需加载其图像资源：

const petalImage = new Image();
petalImage.src = "path/to/petal.png";

当花瓣图像加载完成后，我们的画布便已蓄势待发，只待动画引擎的启动。

设定花瓣属性：赋予动画生命

为让花瓣随风而动，我们需为其设定属性，包括初始位置、速度和旋转角度：

class Petal {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.vx = Math.random() * 4 - 2; // 随机水平速度
    this.vy = Math.random() * 4 - 2; // 随机垂直速度
    this.rotation = Math.random() * Math.PI * 2; // 随机旋转角度
  }
}

通过随机生成的速度和角度，花瓣将呈现出自然灵动的飘落效果。

绘制花瓣：将想象化为现实

有了花瓣属性，我们便可将其绘制到canvas之上：

const drawPetal = (petal) => {
  ctx.save();
  ctx.translate(petal.x, petal.y);
  ctx.rotate(petal.rotation);
  ctx.drawImage(petalImage, -petalImage.width / 2, -petalImage.height / 2);
  ctx.restore();
};

save()和restore()用于保存和恢复画布状态，避免图像绘制对后续绘制造成影响。translate()平移画布原点至花瓣位置，rotate()旋转画布，drawImage()绘制花瓣图像。

动画循环：让花瓣舞动起来

为让花瓣持续飘落，我们需要一个动画循环：

const animate = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 更新花瓣属性
  petals.forEach((petal) => {
    petal.x += petal.vx;
    petal.y += petal.vy;
    petal.rotation += 0.01;
  });

  // 绘制花瓣
  petals.forEach((petal) => {
    drawPetal(petal);
  });

  requestAnimationFrame(animate);
};

clearRect()清除画布，requestAnimationFrame()实现动画循环。在每次循环中，花瓣属性更新，从而实现飘落效果。