Canvas绘制直线

栅格

在我们开始画图之前，我们需要了解一下画布栅格（canvas grid）以及坐标空间。如下图所示，canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。所以图中蓝色方形左上角的坐标为距离左边（X轴）x像素，距离上边（Y轴）y像素（坐 标为（x,y））。

moveTo()

将画笔移动到指定的坐标x以及y上.一般是设置为起点

lineTo()

void ctx.lineTo(x, y);

x直线终点的 x 轴坐标。y直线终点的 y 轴坐标

该方法有两个参数：x以及y ，代表坐标系中直线结束的点。开始点和之前的绘制路径有关，之前路径的结束点就是接下来的开始点，等等。。。开始点也可以通过moveTo()函数改变。

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(100, 100);
ctx.stroke();