p5.js | line()函数

line()函数是 p5.js 中的一个内置函数，用于绘制一条线。为了改变线条的颜色 stroke()函数被使用并且为了改变线条的宽度 strokeWeight()函数被使用。

句法：

line(x1, y1, x2, y2)

或者

line(x1, y1, z1, x2, y2, z2)

参数：此函数接受上面提到的六个参数，如下所述：

• x1：此参数采用第一个点的 x 坐标。
• y1：此参数采用第一个点的 y 坐标。
• z1：此参数采用第一个点的 z 坐标。
• x2：此参数采用第二个点的 x 坐标。
• y2：此参数采用第二个点的 y 坐标。
• z2：此参数采用第二个点的 z 坐标。

下面的程序说明了 P5.js 中的 line()函数：

示例 1：此示例使用 line()函数在不使用 z 坐标的情况下绘制一条线。

function setup() {
  
    // Set the canvas size 
    createCanvas(400, 400);
}
   
function draw() {
      
    // Set the background color
    background(220);
      
    // Set the stroke weight
    strokeWeight(6);
      
    //x1, y1 = 38, 31; x2, y2 = 300, 20;
    // Use line() function to draw line
    line(38, 31, 30, 200); 
}

输出：

示例 2：此示例使用 line()函数使用 z 坐标绘制线条。

function setup() {
  
    // Set the canvas size 
    createCanvas(400, 400);
}
   
function draw() {
      
    // Set the background color
    background(220);
      
    // Set the stroke weight
    strokeWeight(6);
      
    //x1, y1, z1 = 38, 31, 34; 
    // x2, y2, z2 = 300, 200, 45;
    // Use line() function to draw line
    line(38, 31, 34, 300, 200, 45); 
}

输出：

参考： https://p5js.org/reference/#/p5/line