520 来用 canvas 实现一个心跳动画

GIF 2021-5-20 17-34-18.gif

要点就几个：

心形用三次贝塞尔曲线实现，mdn 上面有具体的画法
用 requestAnimationFrame 实现动画效果
每次修改贝塞尔曲线的点
可以用 svg 编辑器来画心形 path 里面就有贝塞尔曲线的坐标
svg 在线编辑
mdn 心形画法

let aa = [],
  bb = [];

for (let i = 20; i > 10; i -= 0.1) {
  aa.push(i);
}
aa = aa.concat([...aa].reverse());

for (let i = 130; i < 140; i += 0.1) {
  bb.push(i);
}

bb = bb.concat([...bb].reverse());
let i = 0;
function draw(t) {
  var canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    var ctx = canvas.getContext("2d");
    //三次贝塞尔曲线
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.moveTo(75, 40);

    let a = aa[i % 200];
    let b = bb[i % 200];
    i++;

    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
    ctx.bezierCurveTo(20, 25, a, 62.5, a, 62.5);
    ctx.bezierCurveTo(a, 80, 40, 102, 75, 120);
    ctx.bezierCurveTo(110, 102, b, 80, b, 62.5);
    ctx.bezierCurveTo(b, 62.5, b, 25, 100, 25);
    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
    ctx.fillStyle = "red";
    ctx.fill();
    requestAnimationFrame(draw);
  }
}
window.onload = function () {
  requestAnimationFrame(draw);
};