当前位置：首页 > news >正文

前端canvas——赛贝尔曲线

news 来源：原创 2024/9/20 14:07:49

曲线之美，不在于曲线本身，而在于用的人。

所以就有了这期赛贝尔曲线。

新规矩，先上个GIT。

效果图

开局一张图，代码全靠编。

代码

画骨

先想着怎么画一个心形吧，等你想好了，就知道怎么画了。

首先就还是JS创建Canvas，因为这样有代码提示。

        const canvas = document.createElement('canvas')canvas.width = canvas.height = 600document.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 = 18ctx.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 = 1let scaleDirection = 1setInterval(() => {ctx.clearRect(-300, -300, 600, 600)scaleFactor += 0.01 * scaleDirectionif (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 = 600document.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 = 1let scaleDirection = 1setInterval(() => {ctx.clearRect(0, 0, 600, 600)scaleFactor += 0.01 * scaleDirectionif (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>