HTML宝典(第 1 版)
4.2.5 绘制贝塞尔曲线
阅读(

HTML基础

HTML元素

表单及应用

Canvas绘图基础

基本用法

使用路径

绘制圆弧

绘制矩形

绘制线段

如何使用路径

绘制贝塞尔曲线

贝塞尔曲线于1959年,由法国物理学家与数学家Paul de Casteljau所发明,于1962年,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表,并用于汽车的车身设计。贝赛尔曲线为计算机矢量图形学奠定了基础,它的主要意义在于无论是直线或曲线都能在数学上予以描述。

贝塞尔曲线分为两种:二次贝塞尔曲线和三次贝塞尔曲线。

quadraticCurveTo()方法绘制二次贝塞尔曲线

二次贝塞尔曲线是一种二次曲线,它只能向一个方向弯曲,由三个点来定义:两个锚点及一个控制点,控制点用来控制曲线的形状。

二次贝塞尔曲线由三个特征切线定义,曲线的第一部分与上下文点和控制点形成的虚线相切,曲线的顶部与midpoint 1和midpoint 2形成的虚线相切,曲线的最后部分与控制点和终点形成的虚线相切。如图 4‑10 所示:

二次贝塞尔曲线示意图
图4-10 二次贝塞尔曲线示意图

在Canvas中,二次贝塞尔曲线的两个锚点分别是上下文点和终点,而起点是已知的。因此只需知道控制点和终点,就能唯一确定一条二次贝塞尔曲线。绘制方法为:

quadraticCurveTo(controlX, controlY, endingPointX, endingPointY)

以下实例使用quadraticCurveTo(cpx,cpy,x,y)方法来绘制一条二次曲线,其中,起点是由上下文维护,控制点为(cpx,cpy),终点为(x,y)。

var cpx = 150, cpy = 50, x = 200, y = 250;
context.lineWidth = 10;
context.beginPath();
context.moveTo(50,250);
context.quadraticCurveTo(cpx,cpy,x,y);
context.stroke();

上述代码的运行结果如图 4‑11 所示:

quadraticCurveTo()方法绘制二次贝塞尔曲线
图4-11 quadraticCurveTo()方法绘制二次贝塞尔曲线

bezierCurveTo()方法绘制三次贝塞尔曲线

由于二次贝塞尔曲线只有一个控制点,所以它永远只能画向一个方向弯曲的弧线,画不出S形曲线。要绘制S形曲线,还需要使用三次贝塞尔曲线。

三次贝塞尔曲线是一种三次曲线,由四个点来定义:两个锚点及两个控制点,两个控制点用来控制曲线的形状。

贝塞尔曲线由5条特征切线定义。曲线的第一部分与从上下文点和第一个控制点形成的虚线相切,曲线的第二部分与midpoint 1和midpoint 3形成的虚线相切,曲线的顶部与midpoint 2和midpoint 4形成的虚线相切,曲线的第四部分与midpoint 3和midpoint 5形成的虚线相切,曲线的最后部分与第二个控制点和终点形成的虚线相切。如图 4‑12 所示:

三次贝塞尔曲线示意图
图4-12 三次贝塞尔曲线示意图

Canvas中的三次贝塞尔曲线由上下文点、两个控制点、一个终点定义。绘制方法为:

bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endPointX, endPointY)

以下实例使用bezierCurveTo(cp1x,cp1y, cp2x,cp2y,x,y)方法来绘制一条二次曲线,其中,起点是由上下文维护,控制点为(cp1x,cp1y)和(cp2x,cp2y),终点为(x,y)。

var cp1x = 200, cp1y = 260, cp2x = 380, cp2y = 10, x = 420, y = 180;
context.lineWidth = 10;
context.beginPath();
context.moveTo(180, 100);
context.bezierCurveTo(cp1x,  cp1y,  cp2x,  cp2y,  x,  y);
context.stroke();

上述代码的运行结果如图 4‑13 所示:

bezierCurveTo()方法绘制三次贝塞尔曲线
图4-13 bezierCurveTo()方法绘制三次贝塞尔曲线

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验