阅读 1086

【canvas】一组点怎么平滑地用曲线连接呢?

给定一组点怎么平滑地用曲线连接呢?

这两天突然找到了一个解决方案,其实可以使用quadraticCurveTo。

二次贝塞尔曲线,就是通过一个控制点,在两点之间连接一条曲线。

上图中,红色的点是控制点,给人感觉,连接两绿色端点的曲线仿佛受到了红色点的磁力吸引。

核心代码是:

context.moveTo(p1.x, p1.y)
context.quadraticCurveTo(control.x, control.y, p2.x, p2.y)
复制代码

点击查看完整代码和效果

当然这个曲线是有公式描述的,不过,本文我们只用它的一个特点就够了。

那就是控制点与端点连线是与曲线相切的。

巧妙的地方来了!因为是相切的,假如我在某条切线的延长线上随便找一个点,再以此为控制点,连接第3个端点,会怎样?

没错,将得到光滑曲线!

上图中,两个控制点关于公共端点是对称的。当然随便一点都是可以的。

两个向量的中点公式是:

x = (x1 + x2) / 2

因此当给出端点和中点这三个点中的任意两个时,很轻松求出另外一个。

现在,3个点连线解决了,那么任意一组点都可以类似画出一条平滑曲线了。

比如5个随机位置的:

点击查看完整代码和效果

感谢你看到这里,希望有所帮助。

本文完。

一组点怎么平滑地用曲线连接呢? - 老姚的回答 - 知乎 www.zhihu.com/question/53…



下面的内容是关于本系列的介绍。

2019年末,本人立了个flag,2020年要研究透canvas动画技术。

(图中二维码是我的唯一微信号,如有掘友想加的,麻烦备注下【掘金】哈。)

在这个系列,我想写一些常见动画知识,本文是第1篇,篇幅可能会长短不一。更多的请查看我的个人主页,或者《系列目录》

因为篇幅问题,根据以往的经验,赞数不会太多,毕竟大家都喜欢给那种短时间看不完的文章点赞。嗯,我好像也是这样。^_^

其实写文章,主要还是给自己看的,算是自我进步的一个见证吧。抱着这种心态也许能好些。

另外关于canvas技术,我目前完整看完了3本书。算是过了基础一关。

1.《HTML5 Canvas核心技术》

2.《HTML5+JavaScript动画基础》

3.《WebGL编程指南》

本系列一些文章可能会参考里面的知识体系,对于一些属于领域共识知识,如有局部雷同,只能说:“自己凭本事学来的,怎能算抄袭。。。”。

开玩笑了,想法来源能提一句还是要提一句的。特别喜欢《精英日课》文章里的一段话:

至于文章内容,canvas的API,本系列可能不会准备逐条介绍了,还请初学的童鞋见谅哈。MDN都有的,挺详细的。同时,文章中遇到的还是会简单提下。主要核心是阐述一些技巧和原理层面的知识个人理解吧。另外也打算分析一些codepen上炫酷动画的实现原理,如果有时间可能会分析几个动画引擎,当然都是2D的。

再次感谢你阅读到这里。下一篇文章见。

关注下面的标签,发现更多相似文章
评论