我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

  Canvas绘图环境创建线性路径的方法：moveTo()，lineTo()。

要使线段出现在canvas中，创建路径之后调用stroke()方法。效果如图所示。

在线演示 详细代码

  这是我放大图片之后的结果，我们发现线条粗细很奇怪：明明lineWidth是1个像素，但是上面的线看起来像两个像素，而且颜色也有点“掺水”。这就涉及到“像素边界”问题了。

  上面问题，跟Canvas的绘制逻辑有关。   实际上，在读取lineWidth后，会在坐标的两边各绘制一半的像素。

绘制1像素在上图中就是在1的位置绘制左右0.5像素的黑色，但是(0,1)(1,2)的剩余部分也会被扩展，以颜色的一半属性来拓展，在图中就是浅灰色，视觉效果下，我们就看到了被“掺水”的现象。

如果我们想要精确绘制到(1,2)这个一个像素并且不发生“掺水”，我们可以将我们绘制的坐标向右偏移0.5像素，如下图所示

这也是我们之前为什么在网格的绘制中，出现那些匪夷所思的0.5的原因了，这里我们再次来看一下网格的绘制。 

同样在上面线段的在线演示中，添加了网格的绘制。

 这段代码不仅绘制在两个像素之间的像素上，而且绘制出的线段仅有0.5像素宽，虽说Canvas没有明文规定，不过所有的浏览器都实现了“抗锯齿”技术，以便创造出“亚像素”线段的绘制效果。

这里给一个用网格线实现网格背景的例子。

抗锯齿(anti-aliasing)：又叫做“反锯齿”、“反走样”，该技术对图像边缘进行柔化，使之看起来更平滑，更接近真实的效果。

亚像素是面阵摄像机的成像面以像素为最小单位。

宏观上，像素就是最小单位，微观上，像素里还有可以无限分割的距离，这个更小的东西我们称之为“亚像素”