如何在 HTML5 中使用 lineTo() 绘制线条?
html5web developmentfront end technology更新于 2024/5/23 1:16:17
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"形状绘制的画布线。
