Canvas 画布提供了一个作图的平面空间，该空间的每个点都有自己的坐标。原点`(0, 0)`位于图像左上角，`x`轴的正向是原点向右，`y`轴的正向是原点向下。 ## 第一课时：路径 以下方法和属性用来绘制路径。 * `CanvasRenderingContext2D.beginPath()`：开始绘制路径。 * `CanvasRenderingContext2D.closePath()`：结束路径，返回到当前路径的起始点，会从当前点到起始点绘制一条直线。如果图形已经封闭，或者只有一个点，那么此方法不会产生任何效果。 * `CanvasRenderingContext2D.moveTo()`：设置路径的起点，即将一个新路径的起始点移动到`(x，y)`坐标。 * `CanvasRenderingContext2D.lineTo()`：使用直线从当前点连接到`(x, y)`坐标。 * `CanvasRenderingContext2D.fill()`：在路径内部填充颜色（默认为黑色）。 * `CanvasRenderingContext2D.stroke()`：路径线条着色（默认为黑色）。 * `CanvasRenderingContext2D.fillStyle`：指定路径填充的颜色和样式（默认为黑色）。 * `CanvasRenderingContext2D.strokeStyle`：指定路径线条的颜色和样式（默认为黑色）。 ~~~ var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(100, 100); ctx.lineTo(200, 200); ctx.lineTo(100, 200); ~~~ 上面代码只是确定了路径的形状，画布上还看不出来，因为没有颜色。所以还需要着色。 ~~~ ctx.fill() // 或者 ctx.stroke() ~~~ 上面代码中，这两个方法都可以使得路径可见。`fill()`在路径内部填充颜色，使之变成一个实心的图形；`stroke()`只对路径线条着色。 这两个方法默认都是使用黑色，可以使用`fillStyle`和`strokeStyle`属性指定其他颜色。 ~~~ ctx.fillStyle = 'red'; ctx.fill(); // 或者 ctx.strokeStyle = 'red'; ctx.stroke(); ~~~ 上面代码将填充和线条的颜色指定为红色。