如何用 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”形繪製的畫布線。
廣告