CanvasRenderingContext2D: lineTo() 方法
Canvas 2D API 的一部分，CanvasRenderingContext2D 方法 lineTo() 透過連線子路徑的最後一個點與指定的 (x, y) 座標，向當前子路徑新增一條直線。
與其他修改當前路徑的方法一樣，此方法不會直接渲染任何內容。要將路徑繪製到畫布上，您可以使用 fill() 或 stroke() 方法。
語法
js
lineTo(x, y)
引數
返回值
無（undefined）。
示例
繪製直線
此示例使用 lineTo() 方法繪製一條直線。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
線條從 (30, 50) 開始，到 (150, 100) 結束。
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath(); // Start a new path
ctx.moveTo(30, 50); // Move the pen to (30, 50)
ctx.lineTo(150, 100); // Draw a line to (150, 100)
ctx.stroke(); // Render the path
結果
繪製連線的線條
每次呼叫 lineTo()（及類似方法）都會自動新增到當前子路徑，這意味著所有線條都會一起被描邊或填充。此示例用一條連續的線繪製了一個字母“M”。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.moveTo(90, 130);
ctx.lineTo(95, 25);
ctx.lineTo(150, 80);
ctx.lineTo(205, 25);
ctx.lineTo(210, 130);
ctx.lineWidth = 15;
ctx.stroke();
結果
規範
| 規範 |
|---|
| HTML # dom-context-2d-lineto-dev |
瀏覽器相容性
載入中…