如何用 HTML5 中的 lineTo() 繪製線條?


在 Canvas 2D API 的 lineTo() 方法中,將當前子路徑的最後一個點連線到給定的 (x, y) 座標,在子路徑中新增一條直線。

lineTo() 方法透過新增一個新點和從上一點繪製一條線到它來擴充套件畫布(該方法不會繪製直線)。

語法

以下是如何繪製一條線的語法

lineTo(x, y)

讓我們看看以下示例,以更好地瞭解如何在 HTML5 中使用 lineTo 來繪製一條線。

示例 1

在以下示例中,我們使用 draw() 函式和 lineto() 來繪製一條線。

<!DOCTYPE html> <html> <body> <canvas id="canvas" height="400" width="500"> </canvas> <script> function draw() { const canvas = document.querySelector('#canvas'); if (!canvas.getContext) { return; } const ctx = canvas.getContext('2d'); ctx.strokeStyle = 'red'; ctx.lineWidth = 5; ctx.beginPath(); ctx.moveTo(100, 100); ctx.lineTo(300, 100); ctx.stroke(); } draw(); </script> </body> </html>

執行上述指令碼後,它將生成輸出,顯示在網頁上繪製的畫布線。

示例 2

我們來看另一個示例,我們在畫布中使用 lineto() 來繪製一條線。

<!DOCTYPE html> <html> <body> <canvas id="Varma" width="300" height="150"></canvas> <script> var c = document.getElementById("Varma"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.moveTo(20, 20); ctx.lineTo(20, 100); ctx.lineTo(70, 100); ctx.stroke(); </script> </body> </html>

當指令碼被執行時,它將在網頁上顯示以“L”形繪製的畫布線。

更新時間:2022-10-12

922 次瀏覽

開啟您的 職業生涯

透過完成課程獲取認證

開始使用
廣告