p5.js | noStroke()函数

简介

p5.js是一个基于JavaScript的创意编程库，它在网页上提供了丰富多样的绘图和动画功能。noStroke()函数是p5.js库中的一种绘图功能之一，用于在绘制形状时取消描边。

使用方法

noStroke()函数用于取消绘图时的描边效果。

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

function draw() {
  background(220);
  
  noStroke(); // 取消描边
  
  fill(255, 0, 0); // 设置填充颜色为红色
  rect(100, 100, 200, 200); // 绘制一个矩形，无描边
  
  fill(0, 255, 0); // 设置填充颜色为绿色
  circle(200, 200, 150); // 绘制一个圆形，无描边
}

在上述例子中，首先使用createCanvas()函数创建一个400x400大小的画布。然后，在draw()函数中设置背景颜色为浅灰色（background(220)）。接下来，使用noStroke()函数取消描边效果。然后，使用fill()函数设置填充颜色，分别为红色和绿色。最后，分别使用rect()函数和circle()函数绘制一个矩形和一个圆形，由于之前调用了noStroke()函数，这两个形状都没有描边效果。

参数

noStroke()函数没有任何参数。

示例

以下是使用noStroke()函数绘制简单形状的示例：

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

function draw() {
  background(220);
  
  noStroke();
  
  fill(255, 0, 0);
  rect(100, 100, 200, 200);
  
  fill(0, 255, 0);
  circle(200, 200, 150);
}

上述示例中，我们创建了一个400x400大小的画布，并在其中绘制了一个无描边的红色矩形和一个无描边的绿色圆形。

结论

noStroke()函数是p5.js库中的一个绘图函数，用于取消描边效果。通过调用该函数，可以实现绘制无描边的形状。这可以在绘制一些简单图形时起到简化代码的作用。