p5.js | line()函数

在p5.js中，使用line()函数可以在画布中绘制一条直线。

语法

line(x1, y1, x2, y2);

• x1: 直线起点的x坐标
• y1: 直线起点的y坐标
• x2: 直线终点的x坐标
• y2: 直线终点的y坐标

示例

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  line(0, 0, mouseX, mouseY);
}

上述代码创建了一个400x400的画布，并在画布中绘制一条从(0,0)开始，到鼠标位置结束的直线。

参数传递

line()函数的参数可以按照以下方式传递:

• 四个整数：line(10, 10, 90, 90)
• 两个p5.js向量：line(createVector(10, 10), createVector(90, 90))
• 一个描述起点和终点的数组：line([10, 10], [90, 90])

画笔样式

可以使用stroke()函数来设置画笔的颜色和样式，例如：

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  stroke('red'); // 设置画笔颜色
  strokeWeight(4); // 设置画笔宽度
  line(100, 0, 100, 400);
  line(200, 0, 200, 400);
  line(300, 0, 300, 400);
}

上述代码创建了一个400x400的画布，并使用红色的画笔绘制了三条竖直的线段，每条线段宽度都为4。

结论

line()函数是p5.js中用于绘制直线的函数，可以设置直线的起点和终点的坐标，并可以通过stroke()函数设置画笔的颜色和样式。该函数的参数可以通过不同方式传递，适应不同的需求。