HTML5畫布 – 畫線

HTML5畫布是一項通用技術，它允許我們使用JavaScript在畫布上實時繪制2D圖形。愛掏網 - it200.com其中一個最基礎的2D圖形就是線。愛掏網 - it200.com本文將介紹如何在HTML5畫布上使用JavaScript繪制線條，并對每個繪制步驟進行說明。愛掏網 - it200.com

首先，我們需要在HTML文件中添加一個<canvas>標簽，這是HTML5畫布的主要元素。愛掏網 - it200.com該標簽有兩個屬性，width和height，分別控制畫布的寬度和高度。愛掏網 - it200.com在這個例子中，我們將寬度和高度都設置為500。愛掏網 - it200.com

<canvas id="canvas" width="500" height="500"></canvas>

接下來，創建一個JavaScript變量canvas，指向<canvas>標簽。愛掏網 - it200.com通過getContext()方法創建一個繪畫環境，我們將在該環境中繪制線。愛掏網 - it200.com該方法需要傳遞一個參數來指定繪制環境的類型。愛掏網 - it200.com在這個例子中，我們將使用2D圖形環境，因此參數應設為"2d"。愛掏網 - it200.com

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

繪制線條

為了在畫布上繪制線條，我們需要指定線條的起始點和結束點。愛掏網 - it200.com可以使用moveTo()方法來指定起始點。愛掏網 - it200.com在這個例子中，我們將線的起始點設置在(100, 100)處。愛掏網 - it200.com接下來使用lineTo()方法指定線條的結束點。愛掏網 - it200.com我們將結束點設置在(400, 400)處。愛掏網 - it200.com這創建了一個從(100, 100)到(400, 400)的線。愛掏網 - it200.com最后，使用stroke()方法將線條添加到畫布中。愛掏網 - it200.com

ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.stroke();

給線條添加樣式

可以使用strokeStyle屬性更改線條的顏色。愛掏網 - it200.com在這個例子中，讓我們將線條的顏色設置為藍色。愛掏網 - it200.com我們還可以使用lineWidth屬性來更改線條的寬度。愛掏網 - it200.com在這個例子中，讓我們將線條寬度設置為5。愛掏網 - it200.com

ctx.strokeStyle = "blue";
ctx.lineWidth = 5;

組合線條

我們可以使用上述步驟繪制任意數量的線。愛掏網 - it200.com例如，可以繪制兩條互相交叉的線。愛掏網 - it200.com使用moveTo()指定第一個線條起始點，并通過lineTo()方法指定第一個線條結束點，并使用stroke()方法將線添加到畫布中。愛掏網 - it200.com然后，使用moveTo()方法指定第二個線條的起始點，并通過lineTo()方法指定第二個線條的結束點，在使用stroke()方法將第二個線條添加到畫布中。愛掏網 - it200.com

ctx.strokeStyle = "green";
ctx.lineWidth = 3;
ctx.moveTo(100, 300);
ctx.lineTo(300, 100);
ctx.stroke();
ctx.strokeStyle = "red";
ctx.lineWidth = 2;
ctx.moveTo(200, 200);
ctx.lineTo(400, 400);
ctx.stroke();

結論

HTML5畫布是一項功能強大的技術，可用于創建各種機制的2D圖形。愛掏網 - it200.com在這個例子中，我們演示了如何在畫布上使用JavaScript繪制線條。愛掏網 - it200.com可以嘗試更改線條顏色和寬度，以及添加更多的線條來創建其他形狀。愛掏網 - it200.com