什么是贝塞尔曲线?

贝塞尔曲线就是这样的一条曲线,它是依据四个位置任意的点坐标绘制出的一条光滑曲线。在历史上,研究贝塞尔曲线的人最初是按照已知曲线参数方程来确定四个点的思路设计出这种矢量曲线绘制法。

贝塞尔曲线的有趣之处更在于它的“皮筋效应”,也就是说,随着点有规律地移动,曲线将产生皮筋伸引一样的变换,带来视觉上的冲击。

1962年,法国数学家Pierre Bézier第一个研究了这种矢量绘制曲线的方法,并给出了详细的计算公式,因此按照这样的公式绘制出来的曲线就用他的姓氏来命名是为贝塞尔曲线。

关于路径的理解

在二维世界中,一个移动的点会形成一条线,而这个点移动的过程就是路径,路径可以是笔直的,也可以是弯曲的。在 canvas 中画出路径的过程大致如下:

1.创建一个路径起点
2.创建从起点到指定点的路径
3.通过笔触将路径渲染出来

使用到的方法:

// 起始一条路径,或重置当前路径
context.beginPath()

// 把路径移动到画布中的指定点 (x,y) ,不创建线条
context.moveTo(x, y)

// 添加一个新点,然后在画布中创建从该点到最后指定点的线条
context.lineTo(x, y)

// 创建弧/曲线
// x:圆的中心的 x 坐标。
// y:圆的中心的 y 坐标。
// r:圆的半径。
// sAngle:起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。
// eAngle:结束角,以弧度计。
// counterclockwise:可选。规定应该逆时针还是顺时针绘图。false = 顺时针,true = 逆时针。
context.arc(x, y, r, sAngle, eAngle, counterclockwise);

// 创建两切线之间的弧/曲线
// x1:弧的起点的 x 坐标
// y1:弧的起点的 y 坐标
// x2:弧的终点的 x 坐标
// y2:弧的终点的 y 坐标
// r:弧的半径
context.arcTo(x1, y1, x2, y2, radius)

// 绘制已定义的路径
context.stroke()

什么是 Canvas?

HTML5 中的 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript)。不过,<canvas> 元素本身并没有绘制能力,它仅仅是图形的容器,我们必须使用脚本来完成实际的绘图任务。

创建 Canvas 元素

向 HTML5 页面添加 canvas 元素,并规定元素的 id、宽度和高度:

<canvas id="myCanvas" width="200" height="200">
<p>您的浏览器不支持 canvas !</p>
</canvas>