关于我们做网站,南昌哪里可以做电商网站,一站式网站管家,上海网址导航曲线之美#xff0c;不在于曲线本身#xff0c;而在于用的人。
所以就有了这期贝塞尔曲线。
新规矩#xff0c;先上个GIT。
效果图 开局一张图#xff0c;代码全靠编。 代码
画骨
先想着怎么画一个心形吧#xff0c;等你想好了#xff0c;就知道怎么画了。
首先就还…曲线之美不在于曲线本身而在于用的人。
所以就有了这期贝塞尔曲线。
新规矩先上个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-lsetInterval。 思想工作完成开始写函数函数名写啥 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定位用一下啦。 最后给出所有代码 scriptconst 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 -问居中效果不会喔。 -答是不是margin: auto不起作用啊。 -问是喔你怎么知道gie -答Canvas是什么元素不是块元素嘛这个时候你要改变它的形状啊用display嘛。 -问你的效果这么piao亮gie -答用了径向渐变、加了模糊效果canvas水平居中效果、图案居中缩放。 居中缩放学一下了喂。
再见啦。
