HTML 新手学习历程-解析一个有点老的表白小canvas

        一个偶然的机会，在百度上接触到了一个很老的表白小程序，就是开始一颗心，上面有click here字样，作为一个学习C语言工科的宅男，感觉很有趣，把源码下载了下来，想学习一下，老源码目录如下，一看调用了那么多库，蒙了，毕竟还是一个新手男啊

        好吧，看了一下内容，果断的怂了，看不懂啊，于是就自己查资料找教程寻找自己能理解的实现方法，果真不愧是入门难啊，当真是经历了九九八十一难，好吧代码截图如下，只有一个HTML文件

这一段就不用说了，canvas的标准定义结构，在定义canvas时，我选择了固定画布位置

          首先，怎么画一个心呢，就是黑线下边这一段，基本原理就是你要找到一个画心形的方程，我这里使用的是笛卡尔的方程，自己定义一个递增量，然后先设定一个画图原点，然后再加上递增量确定下一个点，用lineto函数将两个点连起来，接着继续加增量，这样通过确定一个个心形轮廓上的点连线就画出了一个心形轮廓，接着填色，由于用的是固定坐标，所以直接根据坐标点画上心形之外的线和文本就行了。

          下个问题也是最重要的问题，怎么实现动画呢？我对动画的理解就是图片一帧一帧的播放，在这里面动画就是你点击一下心形区域，然后缩成一个小球，我的想法就是再画一个圆形图让其遮住心形，通过一点点减少这个圆的半径来改变其遮住的面积，这样不就实现了么，好，就是黑线上面那五行，在这里需要把注释掉的设置描边样式给加上去，不然缩圈时会有黑框哦（有黑框可以让你更好的看到实现方法），这里面要用到clip（）方法，可以到百度上查一下，就是实现该函数上边的轮廓遮住下边的轮廓的函数，不要丢掉第一个beginPath(),不然在实现动画时会有胡乱的线，clip（）函数上边的轮廓不要有fill函数（填色函数），不然clip（）不起作用

。

          上面就是实现动画的函数了上面那一段是设置兼容性的，固定不变就行了，下边的function是动画格式，也不需要变，只在里面加自己的画图函数就行了。用的是animateUpdate（）方法实现动画。

           好吧，我这个是阉割版的，只有从心形变成球形，而且也没有点击事件（百度上多得是，根据固定的坐标范围判断就行了），这个程序创意确实是有点老了，并且特效也一般，估计只会让没接触过这个的眼前一亮吧，我也是在做到这就失去兴趣了，知道了原理和方法，接下来照葫芦画瓢就行了。

           还是想笑一下，估计这篇文章也就我自己会看一下吧，哈哈哈哈，就当是写日记了，说不定以后忘了还可以再回顾一下

再加上源码地址吧。

https://download.csdn.net/download/weixin_42222700/10905914