程序员的浪漫刚开始只是对爱心效果感兴趣，后面越走越远，实现了个可配置（爱心颜色、页面标题、页面内容、背景音乐）的H5页面

why

为什么要做这个东西，这篇文章的起源

要追溯到今年2月14日摸鱼闲逛的时候看到了码上掘金活动。里面有个主题叫代码的浪漫，看到有同学用js来画爱心，我就想起了去年的一部电视剧《点燃我，温暖你》里的爱心。由于网上（github、谷歌）没有搜索到比较理想的前端代码，所以对这块有了兴趣。

加上之前一直想做类似的东西，一直又没开工，感觉现在正是时机成熟的时候。

what

这个东西有什么效果
这个东西怎么使用

展示效果

进入主页会有个提示（主要是播放音乐需要用户触发一下），点击确定播放背景音乐，页面会绘制一个多色爱心跳动效果+心跳音、内容通过打字效果+打字音效果呈现，打完字关闭打字声音。

整个页面可以通过自定义页面进行配置。

可以直接通过码上掘金点击运行看效果。进入全屏页面效果更佳，你还可以fork到你的仓库自定义你想要的效果。

你还可以直接点开网址看效果，主要是适配手机，方便微信发送，pc可以开调试模式看。

怎么使用

点击底部自定义页面，就可以配置页面对应元素（提示、标题、内容、背景音乐、心跳颜色）

前面3个是必填属于文字展示，背景音乐可以是一个mp3的网络连接，心跳颜色就是css的color值（这里可以配置多个颜色，没跳动一次会切换一次颜色，多个颜色之间使用英文的逗号,隔断，理论上没有上限）

怎么分享给微信朋友

在自定义页面点击“分享到微信”会生成一个链接，但是这个链接很长，直接发出去不太友好，这个时候我们就需要发送一个图文连接会更好。这里不是我不做微信分享的功能啊，为了个微信分享专门接入sdk感觉不香。我们可以利用微信的bug来实现这个功能

微信有个bug，链接直接打开分享出去还是链接，参考一个gif。但是你在公众号发消息里面打开再分享就是图文了，参考第二个gif。

how

怎么实现

爱心跳动

既然是复刻，那肯定要扒一扒电视剧上的代码了。

视频原版效果

电视剧里代码的实现

电视剧其实已经给出了答案。代码出处：电视剧第5级，31分12秒。令人怀念的Visual Studio😄。

上面的就是用c++语言来实现爱心点位集的获取。整个函数可以得到一组由no_pieces数量个点组成的坐标容器（也就是数组）。no_pieces作为入参，代表画多少个点。通过参数方程式x = 16 sin^3 t, y = (13 cos t - 5 cos 2t - 2 cos 3t - cos 4t) 循环传入不同的角度，可以算出爱心的直角坐标点位。看来编剧也没有完全糊弄观众😄，用心了~

数学又有用武之地了，感觉以前学到知识能用来就像掉了的钱又找回来了一样，很开心😄。参数方程式解出来的图形就是个完美心形了。

前端实现

前端实现技术主要是canvas来进行绘制。具体可以看代码实现，我聊一下思路。

要实现跳动效果要考虑什么问题：

通过什么方式封装
怎么绘制爱心
怎么让爱心动起来
给爱心加上音乐
其他

通过什么方式封装

主要通过class封装，通过const heart = new Heart(参数); heart.draw()的形式来使用，这样封装的好处是可以在页面加载阶段就完成点位的生成，绘制的时候更快一点。

怎么绘制爱心

绘制通过canvas来实现，具体常用的方法如下：

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

// 拿到节点
const canvas = document.querySelector('#heart');
// 设置宽高
canvas.height = 600;
canvas.width = 600;
// 创建一个2d画布
this.context = canvas.getContext('2d');
// 设置点位颜色
this.context.fillStyle = 'red'
// 在横坐标x、纵坐标y填充宽width高height的矩形
this.context.fillRect(x, y, width, height);
// 清理以横坐标x、纵坐标y开始绘制宽width高height矩形的点
this.context.clearRect(x, y, width, height);