特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
在绘制圆和圆弧一节中,了解到在Canvas中可以使用arc()
和arcTo()
绘制制圆或弧线,但很多时候,仅这两个方法还不能满足我们实际的需求,特别是绘制复杂的曲线。不过值得庆幸的是,在Canvas中还提供了其他的方法可以帮助我们绘制复杂的曲线。那就是我们今天要说的贝塞尔曲线,在Canvas中提供了两个独立的方法:quadraticCurveTo()
和bezierCurveTo()
方法。这两个方法就是贝塞尔曲线。
贝塞尔曲线
相信很多同学都知道“贝塞尔曲线”这个词,我们在很多地方都能经常看到。但是,可能并不是每位同学都清楚地知道,到底什么是“贝塞尔曲线”,又是什么特点让它有这么高的知名度。
贝塞尔曲线的数学基础是早在 1912 年就广为人知的伯恩斯坦多项式。但直到 1959 年,当时就职于雪铁龙的法国数学家 Paul de Casteljau 才开始对它进行图形化应用的尝试,并提出了一种数值稳定的 de Casteljau 算法。然而贝塞尔曲线的得名,却是由于 1962 年另一位就职于雷诺的法国工程师 Pierre Bézier 的广泛宣传。他使用这种只需要很少的控制点就能够生成复杂平滑曲线的方法,来辅助汽车车体的工业设计。
正是因为控制简便却具有极强的描述能力,贝塞尔曲线在工业设计领域迅速得到了广泛的应用。不仅如此,在计算机图形学领域,尤其是矢量图形学,贝塞尔曲线也占有重要的地位。今天我们最常见的一些矢量绘图软件,如 Flash、Illustrator、CorelDraw 等,无一例外都提供了绘制贝塞尔曲线的功能。甚至像 Photoshop 这样的位图编辑软件,也把贝塞尔曲线作为仅有的矢量绘制工具(钢笔工具)包含其中。
贝塞尔曲线在 web 开发领域同样占有一席之地。CSS3 新增了 transition-timing-function
属性,它的取值就可以设置为一个三次贝塞尔曲线方程。在此之前,也有不少 JavaScript 动画库使用贝塞尔曲线来实现美观逼真的缓动效果。
有关于贝塞尔曲线的详细介绍,可以查看维基百科的相关介绍。
贝塞尔曲线实例化
对于贝塞尔曲线,我们常看到的有:
- 线性贝塞尔曲线
- 二次方贝塞尔曲线
- 三次方贝塞尔曲线
n
阶贝塞尔曲线
线性贝塞尔曲线
给定点P0
、P1
,线性贝塞尔曲线只是一条两点之间的直线,这条线由下面的公式可以计算出来:
线性贝塞尔曲线函数中的t
会经过由P0
至P1
的B(t)
所描述的曲线。例如当t=0.25
时,B(t)
即一条由点P0
至P1
路径的四分之一处。就像由0
至1
的连续t
,B(t)
描述一条由P0
至P1
的直线。
上图演示了:线性贝塞尔曲线演示动画,t
在[0,1]
区间,其实就是绘制了一条直线。
二次方贝塞尔曲线
二次方贝塞尔曲线的路径由给定点P0
、P1
、P2
的函数B(t)
追踪:
为建构二次贝塞尔曲线,可以中介点Q0
和Q1
作为由0
至1
的t
:
- 由
P0
至P1
的连续点Q0
,描述一条线性贝塞尔曲线。 - 由
P1
至P2
的连续点Q1
,描述一条线性贝塞尔曲线。 - 由
Q0
至
如需转载,烦请注明出处:https://www.w3cplus.com/canvas/drawing-curve.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!