在满屏“爱”意中尽情释放创意：趣味Canvas实战指南

2023-12-14 16:33:51

在数字艺术的浩瀚世界里，Canvas元素可谓是一颗耀眼的明珠。它的魅力在于它提供了无穷的可能性，让你可以将想象力付诸实践，创造出令人惊叹的视觉效果。本指南将带你踏上一段趣味之旅，用Canvas来绘制一个充满爱意的满屏画面，让你的创作之旅充满浪漫色彩。

打造你的画布舞台

旅程的起点是从创建一个空白的画布开始。使用JavaScript代码，我们可以轻松地获取Canvas元素并获取它的绘图上下文，也就是ctx。就像一位准备施展魔法的艺术家，ctx将成为我们的画笔，负责在画布上挥洒色彩和形状。

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

渲染充满爱意的画笔

下一步，我们为我们的画笔赋予色彩。在浪漫的画卷中，红色自然是必不可少的。我们用充满激情的红色来填充画布，为我们的爱意渲染出背景。

ctx.fillStyle = "#ff0000";
ctx.fillRect(0, 0, canvas.width, canvas.height);

绘制满屏的爱心

现在，是时候让爱心闪耀全场了！我们将使用一个数组来存储所有这些跳动的红心，数组的每个元素都代表一个单独的爱心。

const hearts = [];

对于每个爱心，我们将使用路径来绘制它的形状。我们先从中心点开始，然后向各个方向绘制曲线，形成一个完美的心形。

ctx.beginPath();
ctx.moveTo(x, y);
ctx.bezierCurveTo(x + 10, y + 5, x + 15, y + 15, x + 20, y + 10);
ctx.bezierCurveTo(x + 25, y + 5, x + 30, y, x + 20, y);
ctx.closePath();

为了让我们的爱心更加生动，我们让它旋转起来。通过改变旋转角度，我们可以创造出各种动态效果。

ctx.rotate(angle);

最后，我们用红色填充爱心，让它在画布上鲜活地跳动。

ctx.fillStyle = "#ff0000";
ctx.fill();

为爱心注入活力

为了让我们的爱心充满活力，我们需要为它们添加动画效果。我们使用JavaScript的requestAnimationFrame()函数，让爱心在画布上不断移动和旋转。

function animate() {
  // 更新爱心位置和旋转角度
  for (let i = 0; i < hearts.length; i++) {
    hearts[i].x += hearts[i].vx;
    hearts[i].y += hearts[i].vy;
    hearts[i].angle += hearts[i].vAngle;
  }

  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 重绘爱心
  for (let i = 0; i < hearts.length; i++) {
    ctx.beginPath();
    ctx.moveTo(hearts[i].x, hearts[i].y);
    ctx.bezierCurveTo(hearts[i].x + 10, hearts[i].y + 5, hearts[i].x + 15, hearts[i].y + 15, hearts[i].x + 20, hearts[i].y + 10);
    ctx.bezierCurveTo(hearts[i].x + 25, hearts[i].y + 5, hearts[i].x + 30, hearts[i].y, hearts[i].x + 20, hearts[i].y);
    ctx.closePath();
    ctx.rotate(hearts[i].angle);
    ctx.fillStyle = hearts[i].color;
    ctx.fill();
  }

  // 继续动画
  requestAnimationFrame(animate);
}