关于路径的理解
在二维世界中,一个移动的点会形成一条线,而这个点移动的过程就是路径,路径可以是笔直的,也可以是弯曲的。在 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()
阅读全文