HTML5 Canvas – 繪制路徑

HTML5 Canvas是一個功能強大的技術，允許你用JavaScript代碼繪制平面或三維圖形，并且可以進行交互操作。愛掏網 - it200.com在HTML5 Canvas中，路徑(path)是一個由直線段、曲線段、圓弧和其他形狀組成的容器，通過繪制路徑，你可以創建各種各樣的形狀，從簡單的圖形例如矩形，圓形到復雜的自定義圖形。愛掏網 - it200.com

在HTML5 Canvas中，創建路徑需要三個步驟：

1. 創建路徑起始點：使用beginPath()方法啟動一個新路徑，表示開始創建一個新的路徑。愛掏網 - it200.com
2. 添加路徑原點：使用moveTo(x, y)方法將路徑的起始點移動到指定的坐標。愛掏網 - it200.com
3. 添加路徑中其他的點：使用繪圖命令例如: lineTo(x, y), arc(cx, cy, r, startAngle, endAngle, anticlockwise)也可以使用貝塞爾曲線繪制路徑，使用quadraticCurveTo(cpX, cpY, x, y)上例表示在路徑中添加一個拋物線曲，則可使用如下代碼：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();

// 起始點
ctx.moveTo(50, 50);

// 繪制二次貝塞爾曲線
ctx.quadraticCurveTo(230, 30, 150, 110);

ctx.lineWidth = 5;
ctx.strokeStyle = 'blue';
ctx.stroke();

繪制線條

在HTML5 Canvas中，lineTo(x,y)方法是用來繪制直線的，要將直線繪制垂直于x軸/水平于y軸，則需要使用不同的坐標值。愛掏網 - it200.com例如，下面的代碼將在HTML5 Canvas上繪制一個連接起點(20,20)和終點(100,100)的直線。愛掏網 - it200.com

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

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

接下來，將這個繪制路徑存儲到畫布上，使用stroke()方法繪制路徑上的圖形。愛掏網 - it200.com這個函數會繪制所有輸入路徑的線條，只要“beginPath”調用與stroke()之間不進行任何需要繪制的內容。愛掏網 - it200.com在繪制直線時，應該給路徑設置線條寬度和顏色。愛掏網 - it200.com

ctx.lineWidth = 5;
ctx.strokeStyle = 'red';
ctx.stroke();

繪制圓

在HTML5 Canvas中，arc()方法是用來繪制圓和圓弧的。愛掏網 - it200.com該函數需要6個參數：

1. 圓心的x軸坐標
2. 圓心的y軸坐標
3. 圓的半徑r
4. 所繪制的圓弧的開始角度，以弧度計
5. 所繪制的圓弧的結束角度，以弧度計
6. 一個布爾值，規定是順時針繪制圓弧，還是逆時針繪制圓弧

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI, false);
ctx.fillStyle = 'green';
ctx.fill();
ctx.lineWidth = 5;
ctx.strokeStyle = '#003300';
ctx.stroke();

該函數在當前路徑上添加一個圓。愛掏網 - it200.cominnerHTML的角度單位是以弧度為單位。愛掏網 - it200.com下表顯示了一些圓弧順序和圓心角的值之間的關系：

繪制矩形

HTML5 Canvas還可以用于繪制矩形，通過使用fillRect(x,y,width,height)方法，來繪制矩形。愛掏網 - it200.com該方法需要4個參數：x軸坐標、y軸坐標、矩形的寬度和高度。愛掏網 - it200.com

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.fillRect(25, 25, 100, 50);
ctx.lineWidth = 3;
ctx.strokeStyle = '#00FF00';
ctx.strokeRect(25, 25, 100, 50);

上述代碼繪制了一個填滿綠色的矩形，邊界使用了藍色的線條，邊界可以通過使用strokeRect()方法來繪制。愛掏網 - it200.com

自定義路徑

在HTML5 Canvas中，你可以通過繪制不同的線條和形狀來創建自定義路徑。愛掏網 - it200.com例如，下面這個示例將會創建一個包含兩個矩形和一條直線的路徑：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 紅色矩形
ctx.fillStyle = "rgb(200, 0, 0)";
ctx.fillRect (10, 10, 55, 50);

// 綠色矩形
ctx.fillStyle = "rgb(0, 200, 0)";
ctx.fillRect (30, 30, 55, 50);

// 繼續繪制路徑
ctx.beginPath();
ctx.moveTo(53,72);
ctx.lineTo(33,92);
ctx.lineTo(70,102);
ctx.lineWidth = 5;
ctx.strokeStyle = '#0000FF';
ctx.stroke();

清除路徑

在HTML Canvas中，clearRect(x,y,width,height)可用于清除指定區域內的一部分或全部像素，其中4個參數分別表示畫布上要清除的左上角x坐標、左上角y坐標、要清除的矩形區域寬度和高度。愛掏網 - it200.com例如，要清除整個畫布，則可以使用下面的代碼：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");

ctx.clearRect(0,0,canvas.width,canvas.height);

結論

路徑繪制是HTML5 Canvas功能中最基礎的部分之一，通過繪制路徑，我們可以在畫布上創建出復雜的形狀，并且通過組合不同形狀可以創造出萬千圖形，包括可用于游戲和交互的各種圖形。愛掏網 - it200.com這些形狀都有其特定的繪制方法，例如繪制線條、圓、矩形，并且可以基于其特有的特征進行組合繪制。愛掏網 - it200.com在您開始繪制時，首先記住一點：每個新的路徑應使用beginPath()方法聲明，并在其之后繪制所有的形狀，組合方式與先前的區別。愛掏網 - it200.com