分分钟搞定贝塞尔曲线,这款工具值得拥有

贝塞尔曲线听名字就知道可以画一条优雅的曲线,可是上来就是控制点,它怎么控制呢,心里想的图形总是与这个控制点关联不上,憋着急,分分钟搞定。

贝斯尔曲线有二次贝塞尔曲线和三次贝塞尔曲线,微信小程序中是这样使用的(其他大概都差不多)
二次贝塞尔曲线:

CanvasContext.quadraticCurveTo(number cpx, number cpy, number x, number y)

三次贝塞尔曲线:

CanvasContext.bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)

详情使用可查看官方文档:

工具预览:

假如我要画个心,怎么搞?

先试试二次贝塞尔曲线工具
在这里插入图片描述
好像还不太完美,接着试试三次贝塞尔曲线工具
在这里插入图片描述
完美!!!
接下来把几个参数传递到函数当中就可以了

工具体验

在这里插入图片描述

工具很简单,只是为了写代码方便,不成敬意。

发布了62 篇原创文章 · 获赞 48 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/WeiHan_Seven/article/details/104648399
今日推荐