关于路径的理解

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