前端canvas——赛贝尔曲线

news2024/12/23 12:26:15

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

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

新规矩，先上个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>