用js写一个爱心动画代码

以下是一个简单的爱心动画，使用 HTML5 的 Canvas 和 JavaScript 实现：

HTML：

<canvas id="canvas"></canvas>

CSS：

canvas {
  display: block;
  margin: auto;
}

JavaScript：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;

const heart = {
  x: width / 2,
  y: height / 2,
  size: 100,
  speed: 5,
  fillStyle: '#ff6b6b'
};

function drawHeart() {
  ctx.beginPath();
  ctx.moveTo(heart.x, heart.y + heart.size / 4);
  ctx.quadraticCurveTo(heart.x - heart.size / 4, heart.y - heart.size / 4, heart.x, heart.y - heart.size / 2);
  ctx.quadraticCurveTo(heart.x + heart.size / 4, heart.y - heart.size / 4, heart.x, heart.y + heart.size / 4);
  ctx.closePath();
  ctx.fillStyle = heart.fillStyle;
  ctx.fill();
}

function update() {
  heart.y -= heart.speed;
  if (heart.y < -heart.size) {
    heart.y = height + heart.size;
  }
}

function render() {
  ctx.clearRect(0, 0, width, height);
  drawHeart();
}

function loop() {
  requestAnimationFrame(loop);
  update();
  render();
}

loop();

代码解析：

- 创建一个 Canvas 元素，并使用 JavaScript 获取 Canvas 上下文对象。
- 定义一个心形对象，包括位置、大小、速度和填充颜色等属性。
- 编写绘制心形的函数 drawHeart，使用二次贝塞尔曲线绘制一个心形。
- 编写更新心形位置的函数 update，使其以一定速度向上移动，并在移出画布边界时重置位置。
- 编写绘制函数 render，清空画布并调用 drawHeart 函数绘制心形。
- 编写循环函数 loop，使用 requestAnimationFrame 方法循环调用 update 和 render 函数，实现动画效果。

效果预览：


完整代码和在线演示：https://codepen.io/linyuxuanlin/pen/MWjWgZJ