如何在 HTML5 中使用 lineTo() 绘制线条？

Canvas 2D API 的 lineTo() 方法将当前子路径的最后一个点连接到给定的 (x, y) 坐标，向子路径添加一条直线。

lineTo() 方法通过添加一个新点并从前一个点绘制一条线到该点来扩展画布（此方法不会绘制该线）。

语法

以下是绘制线条的语法

lineTo(x, y)

让我们看以下示例，以更好地了解如何在 HTML5 中使用 line to 绘制线条。

示例 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 次浏览

开启您的职业生涯

完成课程获得认证

立即开始
广告