哪些方法用于在 Canvas 上绘制直线？

HTML 提供了一个非常有趣的元素，称为 ，它只是一个用于在网页上绘制图形的容器，其余的工作都由 JavaScript 完成。

JavaScript 中有几种方法可以在画布上绘制形状。在本文中，我们将了解如何在画布上绘制一条线以及用于绘制一条直线的基本方法。

在画布上画直线有以下几种方法。

1. beginPath() ：此方法用于开始我们要绘制的路径。它不需要任何参数。

2. moveTo()：此方法接受两个参数，它们将是任何路径的起点。该方法将从该特定点开始形状。我们稍后可以通过更改其参数的值来更改起点。

   例子：

   moveTo(10 , 30);

3. lineTo()：此方法也将采用两个值，并将起点添加到它所持有的点。代码表示从一个点到另一个点的路径。

   例子：

   moveTo(10 , 30); 
   lineTo(40 , 100);

4. stroke()：这个方法将描边给定的路径并使其可见，这个方法不带任何参数。

上面列出的所有方法都需要在画布上画一条线。请注意，这些只是用于绘制线条的一些方法，但在 JavaScript 中还有其他几种方法可用于处理画布。

示例：现在创建一个 HTML 文件并添加以下代码以在画布上绘制一条直线。

HTML

  

    
    
    

  

  
    
    
  
    
        var canvas = document.getElementById('canvas1');
  
        // Use the if condition in case any browser
        // does not support canvas
        if (canvas.getContext) {
            var context = canvas.getContext('2d');
  
            // Begin the path
            context.beginPath();
  
            // Starting point
            context.moveTo(5, 52);
  
            // End point
            context.lineTo(325, 55);
  
            // Stroke will make the line visible
            context.stroke();
        }
    

  

输出：

输出

使用画布时，我们必须指定大小，以便我们可以在其中绘制形状。请注意，如果形状的值超过画布边界，则形状将被限制在该边界内并且无法通过，尽管它不会给出任何错误。这就是我们如何在画布上绘制线条。