关于路径的理解

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

绘制路径

绘制直线

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
ctx.beginPath(); 
ctx.moveTo(50, 50); 
ctx.lineTo(150, 50); 
ctx.stroke();

绘制弧/曲线

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(50, 50, 40, 0, Math.PI / 2, false);
ctx.stroke(); 

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);           // 创建开始点
ctx.lineTo(50,20);          // 创建水平线
ctx.arcTo(150,20,150,70,50); // 创建弧
ctx.lineTo(150,150);         // 创建垂直线
ctx.stroke();