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

最新推荐文章于 2024-01-07 08:29:31 发布

钢铁直男杜

最新推荐文章于 2024-01-07 08:29:31 发布

阅读量229

点赞数

文章标签： HTML 一个表白程序实现方法解析

本文链接：https://blog.csdn.net/weixin_42222700/article/details/86133701

版权

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

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

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

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

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