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(); ~~~ 上面代碼將填充和線條的顏色指定為紅色。