阅读量:0
曲线之美，不在于曲线本身，而在于用的人。
所以就有了这期赛贝尔曲线。
新规矩，先上个GIT。
效果图
开局一张图，代码全靠编。
代码
画骨
先想着怎么画一个心形吧，等你想好了，就知道怎么画了。
首先就还是JS创建Canvas，因为这样有代码提示。
const canvas = document.createElement('canvas') canvas.width = canvas.height = 600 document.body.append(canvas)接着就是调用三阶的赛贝尔曲线，什么是三阶？
除了命名上不同，还有参考点个数不同——二阶的就一个参考点，三阶有很多个。
众所周知，心形其实是一个不规则的曲线，所以一个是不行的，至少不那么好看。
咱们就用三阶：
ctx.beginPath() ctx.moveTo(300, 200) ctx.bezierCurveTo(40, 20, 0, 460, 300, 500) ctx.moveTo(300, 200) ctx.bezierCurveTo(560, 20, 600, 460, 300, 500) ctx.closePath() ctx.stroke()里面的参考点坐标，自己想怎么来就怎么来。
前提是能看出来这是一个心形就OK了，看不出来也没关系，咱们最重要的在于怎么写动画。
如果你按照我的代码写，最终运行的效果中间是有一根线的，你可以stroke()两次，但是我“老奸巨猾”，选择了让画笔颜色消失。
当然啦，你也可以用fill()，这个是最好的。
我的宗旨：
道路千万条
这样，边框的颜色就没有了——因为边框没有了。
上色（可选）
画完这个，就得上色了。
上色很简单，你可以创建一个最简单的线性渐变色，然后fillStyle直接赋值即可。
你也可以追求花里胡哨，选择径向渐变，甚至是放射性渐变。
我这里选择径向渐变，代码就不给了，“心”的颜色取决于你喜欢什么色。
模糊（可选）
如果你跟我一样，Very Strong（跟我念，sizhuang）。
那你还可以上个模糊，模糊很简单，就四个参数，直接一股脑全巴拉巴拉写完就OK了：
ctx.shadowColor = '#ccc' // 模糊颜色 ctx.shadowOffsetX = 12 // 模糊坐标 ctx.shadowOffsetY = 18 ctx.shadowBlur = 58 // 模糊度数对了，忘记告诉你了，模糊要在fill()和stroke()之前进行，要不然你铁定显示不出模糊效果。
模糊度数越高，你越看不清楚阴影。
至于取值，看你喜欢什么样的模糊效果，有投影的效果，有完全模糊的效果，都看你喜欢。
封装函数
封装函数都会吧？
-为什么要封装？
-为了后续调用。
对了，记得写个具名函数。
为了好理解，函数名我起init()——这都是学人的，美其名曰：企业级标准。
跳动的心
下面就是最困难的了——怎么让这个静止的心跳动起来了。
其实也很简单，那就是先把旧的图案去掉，换上新的。
道理就是这么个理，但是实现起来就很抽筋：
我们知道，心跳动是什么？
是一个过程，有来有回的。
你不能光来不回吧？
所以咱们得划定个范围，让“心”这个图案在这个范围内不停播放。
问：需要几个变量？
答：两个。
一个是步进量，一个是方向：
if (scaleFactor >= 1.08 || scaleFactor <= 0.98) { scaleDirection *= (-1) // 改变缩放方向 }GIF图中是有个循环播放的效果的。
怎么循环呢？总不能用while吧？
好像又不是不行，就是你控制不了时间啊。
而且while很容易控制不住，死循环就炸鸡了。
既然提到时间了，那就用setInterval——定时器咯。
跟我拼写：s-e-t-I-n-t-e-r-v-a-l，setInterval。
思想工作完成，开始写函数，函数名写啥？
function bounce() { let scaleFactor = 1 let scaleDirection = 1 setInterval(() => { ctx.clearRect(-300, -300, 600, 600) scaleFactor += 0.01 * scaleDirection if (scaleFactor >= 1.08 || scaleFactor <= 0.98) { scaleDirection *= (-1) } // 应用变换并重新绘制心形 ctx.save() // 保存当前画布状态 ctx.scale(scaleFactor, scaleFactor) init() // 重新绘制心形 ctx.restore() // 恢复画布到保存的状态 }, 50) }这个时间啊，就看你们自己调整了。
太快，不好看；太慢，又好像die了。
所以，你自己把握一下啦。
写完函数之后，记得调用函数，这样，咱们的动画就做好啦。
总结
又到了收工的时候，不知道你发现没发现，这个心居然不是原地跳动的。
这个怎么办捏？
当然是要付费学习的啦。
Tips：定位用一下啦。
最后给出所有代码：
<script> const canvas = document.createElement('canvas') canvas.width = canvas.height = 600 document.body.append(canvas) const ctx = canvas.getContext('2d') function init(){ // 彩damn：先在这里改一下定位，然后下面的所有坐标位置都要修改 ctx.beginPath() ctx.moveTo(300, 200) ctx.bezierCurveTo(40, 20, 0, 460, 300, 500) ctx.moveTo(300, 200) ctx.bezierCurveTo(560, 20, 600, 460, 300, 500) ctx.closePath() ctx.fill() } function bounce() { let scaleFactor = 1 let scaleDirection = 1 setInterval(() => { ctx.clearRect(0, 0, 600, 600) scaleFactor += 0.01 * scaleDirection if (scaleFactor >= 1.08 || scaleFactor <= 0.98) { scaleDirection *= (-1) } // 应用变换并重新绘制心形 ctx.save() // 保存当前画布状态 ctx.scale(scaleFactor, scaleFactor) // ctx.translate(0, 0) // 彩damn：这个再次改变坐标轴的原点，配合上面。 init() // 重新绘制心形 ctx.restore() // 恢复画布到保存的状态 }, 50) } bounce() </script>-问：居中效果不会喔。
-答：是不是margin: auto不起作用啊。
-问：是喔，你怎么知道gie？
-答：Canvas是什么元素？不是块元素嘛，这个时候你要改变它的形状啊，用display嘛。
-问：你的效果这么piao亮gie？
-答：用了径向渐变、加了模糊效果，canvas水平居中效果、图案居中缩放。
居中缩放，学一下了喂。
再见啦。
