JS+Canvas实现满屏爱心和文字动画的制作

接下来我将详细讲解“JS+Canvas实现满屏爱心和文字动画的制作”的完整攻略。

准备工作

1. 创建 HTML 页面，并引入 Canvas 标签。

```html

```

1. 在 JavaScript 文件中获取 Canvas 对象并设置宽高。

javascript
var canvas = document.getElementById("myCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext("2d");

1. 设置字体样式。

javascript
ctx.font = "bold 70px Arial";
ctx.textAlign = "center";
ctx.fillStyle = "#fff";

制作满屏爱心动画

1. 创建 Heart 对象并设置初始位置。

```javascript
function Heart(x, y, size, color) {
this.x = x;
this.y = y;
this.size = size;
this.color = color;
this.angle = 0;
}

var heart = new Heart(canvas.width / 2, canvas.height / 2, 10, "#ff69b4");
```

1. 定义绘制爱心的函数。

javascript
function drawHeart(heart) {
ctx.save();
ctx.translate(heart.x, heart.y);
ctx.rotate(heart.angle);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.bezierCurveTo(
heart.size,
0,
heart.size,
-heart.size * 3,
0,
-heart.size * 3
);
ctx.bezierCurveTo(
-heart.size,
-heart.size * 3,
-heart.size,
0,
0,
0
);
ctx.fillStyle = heart.color;
ctx.fill();
ctx.restore();
}

1. 定义更新爱心位置的函数。

javascript
function updateHeart(heart) {
heart.y += Math.sin(heart.angle) * 2;
heart.angle += Math.PI / 180;
if (heart.y > canvas.height + heart.size * 3) {
heart.y = 0 - heart.size * 3;
}
}

1. 使用上述函数在 Canvas 上进行绘制。

```javascript
function render() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);

 drawHeart(heart);
 updateHeart(heart);

 requestAnimationFrame(render);

}

render();
```

制作文字动画

1. 创建 Text 对象并设置初始位置和内容。

```javascript
function Text(x, y, content) {
this.x = x;
this.y = y;
this.content = content;
}

var text = new Text(canvas.width / 2, canvas.height / 2, "Hello, world!");
```

1. 定义绘制文字的函数。

javascript
function drawText(text) {
ctx.fillText(text.content, text.x, text.y);
}

1. 定义更新文字位置的函数。

javascript
function updateText(text) {
text.y += 1;
if (text.y > canvas.height + 70) {
text.y = 0 - 70;
}
}

1. 使用上述函数在 Canvas 上进行绘制。

```javascript
function loop() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);

 drawText(text);
 updateText(text);

 requestAnimationFrame(loop);

}

loop();
```

示例说明

示例一：满屏爱心和文字动画交替播放

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

  drawHeart(heart);
  updateHeart(heart);

  drawText(text);
  updateText(text);

  requestAnimationFrame(render);
}

render();

在 render 函数中交替绘制爱心和文字。通过 requestAnimationFrame 方法更新动画，实现两个动画的循环播放。

示例二：满屏爱心和文字动画合并为一个动画

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

  drawHeart(heart);
  updateHeart(heart);

  drawText(text);
  updateText(text);

  requestAnimationFrame(render);
}

render();

在 render 函数中同时绘制爱心和文字。通过 requestAnimationFrame 方法更新动画，实现两个动画合并为一个动画。这样可以使画面更加丰富，增加观赏性。