如何用 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 次浏览

开启您的 职业生涯

通过完成课程获取认证

开始使用
广告
© . All rights reserved.