前端canvas——赛贝尔曲线_业界新闻

发布时间:2024-07-28 20:10

阅读量: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>