基于JavaScript实现新年贺卡特效-前端开发

实现新年贺卡特效的基本思路是借助 JavaScript 的 Canvas API 绘制图形和动画效果。

实现新年贺卡特效的基本思路是借助 JavaScript 的 Canvas API 绘制图形和动画效果。

第一步：创建 HTML 页面

首先要新建一个 HTML 页面，并设定好 canvas 元素的宽高和 id，例如：

<body>
  <canvas id="myCanvas" width="400" height="400"></canvas>
</body>

第二步：获取 canvas 元素和上下文对象

在 JavaScript 中获取 canvas 元素和上下文对象（context）用的是 querySelector 和 getContext 方法，例如：

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

第三步：编写绘制图形的 JavaScript 代码

绘制图形的代码是实现特效的核心部分。以下是两个示例：

示例一：绘制心形

ctx.beginPath();
ctx.moveTo(75, 40);
ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
ctx.closePath();
ctx.fillStyle = "red";
ctx.fill();

示例二：绘制烟花

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

ctx.fillStyle = "white";
for (let i = 0; i < 80; i++) {
  ctx.beginPath();
  ctx.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 4, 0, Math.PI * 2);
  ctx.fill();
}

ctx.fillStyle = "red";
ctx.fillRect(170, 20, 60, 60);
ctx.fillRect(170, 100, 60, 60);
ctx.fillRect(110, 60, 60, 60);
ctx.fillRect(230, 60, 60, 60);

第四步：编写动画效果的 JavaScript 代码

动画效果可以通过 setInterval 和 requestAnimationFrame 开启循环绘制的方式实现。以下是一个示例：

// 定义全局变量
let color = "#ffffff";
let x = canvas.width / 2;
let y = canvas.height / 2;

// 设置循环动画
setInterval(function() {
  // 切换颜色
  if (color === "#ffffff") {
    color = "#f44336";
  } else {
    color = "#ffffff";
  }

  // 绘制图形
  ctx.fillStyle = color;
  ctx.fillRect(x, y, 5, 5);

  // 更新位置
  x += Math.random() * 10 - 5;
  y += Math.random() * 10 - 5;

  // 边界检测
  if (x < 0 || x > canvas.width) {
    x = canvas.width / 2;
  }
  if (y < 0 || y > canvas.height) {
    y = canvas.height / 2;
  }
}, 50);