H5实现炫酷的心型炫酷动效

“我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！ 这次带来一个更加炫酷的心型炫酷动效，直接上图，有兴趣的就继续往下看，没兴趣直接过。

屏幕上眼花缭乱的心，不停的冲击着你的视线，让那些少女心砰砰直跳，绝对表白利器，同志们可以直接拿去给中意的姑娘看哦。 直接将下面的代码复制运行就可以看到效果：

炫酷的心 html, body { height: 100%; padding: 0; margin: 0; background: #000; } canvas { position: absolute; width: 100%; height: 100%; }

  };
  ParticlePool.prototype.draw = function(context, image) {
    // 画活动粒子
    if (firstActive < firstFree) {
      for (i = firstActive; i < firstFree; i++)
        particles[i].draw(context, image);
    }
    if (firstFree < firstActive) {
      for (i = firstActive; i < particles.length; i++)
        particles[i].draw(context, image);
      for (i = 0; i < firstFree; i++)
        particles[i].draw(context, image);
    }
  };
  return ParticlePool;
})();
(function(canvas) {
  var context = canvas.getContext('2d'),
    particles = new ParticlePool(settings.particles.length),
    particleRate = settings.particles.length / settings.particles.duration, // particles/sec
    time;
​
  // 获取heart点位 -PI <= t <= PI
  function pointOnHeart(t) {
    return new Point(
      160 * Math.pow(Math.sin(t), 3),
      130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25
    );
  }
​
  // 使用canvas创建粒子图像
  var image = (function() {
    var canvas = document.createElement('canvas'),
      context = canvas.getContext('2d');
    canvas.width = settings.particles.size;
    canvas.height = settings.particles.size;
    // 创建路径的辅助函数
    function to(t) {
      var point = pointOnHeart(t);
      point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
      point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;
      return point;
    }
    // 创建路径
    context.beginPath();
    var t = -Math.PI;
    var point = to(t);
    context.moveTo(point.x, point.y);
    while (t < Math.PI) {
      t += 0.01;
      point = to(t);
      context.lineTo(point.x, point.y);
    }
    context.closePath();
    // 填充
    context.fillStyle = '#ea80b0';
    context.fill();
    // 创建图片
    var image = new Image();
    image.src = canvas.toDataURL();
    return image;
  })();
​
  // 渲染
  function render() {
    requestAnimationFrame(render);
​
    // update time
    var newTime = new Date().getTime() / 1000,
      deltaTime = newTime - (time || newTime);
    time = newTime;
​
    // clear canvas
    context.clearRect(0, 0, canvas.width, canvas.height);
​
    // 创建新的粒子
    var amount = particleRate * deltaTime;
    for (var i = 0; i < amount; i++) {
      var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
      var dir = pos.clone().length(settings.particles.velocity);
      particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
    }
​
    // 更新并绘制
    particles.update(deltaTime);
    particles.draw(context, image);
  }
​
  // 处理canvas大小
  function onResize() {
    canvas.width = canvas.clientWidth;
    canvas.height = canvas.clientHeight;
  }
  window.onresize = onResize;
​
  // 延迟渲染
  setTimeout(function() {
    onResize();
    render();
  }, 10);
})(document.getElementById('pinkboard'));