程序猿的情人节是这样开启的-逐梦个人博客

转眼间，情人节马上就要到了，作为程序猿的我们有属于自己的浪漫，跟随本文让我们一起看看程序猿的情人节是如何开启的，下面我们就开始程序猿的土味情人节吧。

情人节，属于彼此相爱的人的节日，爱是永恒的话题，所以得有爱心，对于程序而言，爱心对应的是一堆公式，比如：

r = a * (1-sinθ)

这个公式的函数图像是心形线，又被称为“笛卡尔的爱情坐标公式”，在这个公式的背后还有一个凄美的爱情故事：

笛卡尔成为了公主的数学老师。公主的数学在笛卡尔的悉心指导下突飞猛进，他们之间也开始变得亲密起来，每天的形影不离也使他们彼此产生了爱慕之心，一段纯粹、美好的爱情悄然萌发。然而，没过多久，他们的恋情传到了国王的耳朵里，国王大怒，下令马上将笛卡尔处死。在克里斯汀的苦苦哀求下，国王将他放逐回国，公主被软禁在宫中。
身体孱弱的笛卡尔回到法国后不久，便染上重病。在生命进入倒计时的那段日子，他日夜思念公主，每天坚持给她写信，盼望着她的回音。在笛卡尔给克里斯汀寄出第十三封信后，他永远地离开了这个世界，这最后的一封信上没有写一句话，只有一个方程式：r=a(1-sinθ)，这条曲线就是著名的“心形线”。

但是这里我们准备选用另外一个爱心公式：

x = 16 * Math.pow(Math.sin(t), 3); y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t);

使用方式如下：

function getPoints(scale = 1) {
    const points = [];
    for (let t = 0; t &lt; 2 * Math.PI; t += 0.01) {
        const x = scale * 16 * Math.pow(Math.sin(t), 3);
        const y = scale * 13 * (Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
        points.push({ x, y });
    }
    return points;
}

接下来，情人节得有花吧，虽然玫瑰更佳，这里我们准备了各种花，然后再辅以一定的动画，就得到了以下的效果：

在实际绘制的时候我们将爱心做了翻转和放大：

// 根据爱心公式获取点集合
const points = getPoints(20);

// 移动到中心点
ctx.translate(canvasWidth / 2, canvasHeight / 2);

// 动画绘制花朵
drawHeartWithFlower();

function getPoints(scale = 1) {
    const points = [];
    for (var i = 10; i &lt; 30; i += 0.2) {
      const t = i / Math.PI;
        const x = scale * 16 * Math.pow(Math.sin(t), 3);
        const y = -scale * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
        points.push({ x, y });
    }
    return points;
}

function loadImage(src) {
    return new Promise(function(resolve, reject) {
      var img = new Image();
      img.src = src;
      img.onload = function() {
        resolve(this);
      }
      img.onerror = function() {
        reject();
      }
    });
}

function drawPointImage(point, img, width) {
    var width = width || img.width;
    var height = img.height / (img.width / width);
    ctx.drawImage(img, point.x, point.y, width, height);
}

function getFlower() {
  return `img/${Math.floor(Math.random() * flowerPicLength)}.png`;
}

function drawHeartWithFlower(cb) {
  const point = points.shift();
  if (point) {
    const flower = getFlower();
    loadImage(flower)
      .then(img => {
        drawPointImage(point, img, 50);
        requestAnimationFrame(drawHeartWithFlower.bind(undefined, cb));
      });
  } else {
    if (typeof cb === 'function') {
      cb();
    }
  }
}

然后，情人节得一起回忆一些重要的纪念日吧，比如我们在一起多少天啦，我们结婚多少天啦之类的，让我们用程序来将这些日子展现出来吧。

这里涉及到了纪念日和纪念的事情，我们分别将其定义成两个变量：

const memoryTime = new Date('2016-08-09 14:56:00');
const memoryEvent = '结婚';

然后计算当前时间和纪念日之间的时间差, 代码如下：

function getTimeDiff(oldDate, newDate) {
  const subTime = (newDate.getTime() - oldDate.getTime()) / 1000;
  const days = parseInt(subTime / 86400);
  const hours = parseInt(subTime / 3600) - 24 * days;
  const mins = parseInt(subTime % 3600 / 60);
  const secs = parseInt(subTime % 60);
  return `&lt;span>${days}&lt;/span>天&lt;span>${hours}&lt;/span>小时&lt;span>${mins}&lt;/span>分钟&lt;span>${secs}&lt;/span>秒`;
}

function setDiffText() {
  const diffStr = getTimeDiff(memoryTime, new Date());
  $time.innerHTML = diffStr;
}

function realTimeDiff() {
  setDiffText();
  requestAnimationFrame(realTimeDiff);
}

最终的效果：