p5.js noSmooth()函数

在 p5.js 中，所有图像、字体、形状等都默认设置为 smooth()，除了 3D 模型，默认情况下 noSmooth() 处于活动状态。正如我们所知，smooth()函数平滑列出元素的边缘。因此，相反 noSmooth()函数会限制元素边缘的平滑。

边缘的平滑需要一些时间。所以，如果你想更快地运行你的 p5.js 草图并且你不太关心视觉效果。您可以使用 noSmooth()函数。

句法：

noSmooth();

参数： noSmooth()函数不接受任何参数。

示例 1：

Javascript

function setup() {
  
    // Create canvas of 400X400 px
    createCanvas(400, 400);
}
  
function draw() {
  
    // Set background color to green
    background('green');
  
    // No border to shapes
    noStroke();
  
    smooth(); // by Default
    ellipse(0, 0, 500, 500);
  
    noSmooth();
    ellipse(400, 400, 500, 500);
}

输出：顶部椭圆是平滑的，底部椭圆是 noSmooth

示例 2：

Javascript

function setup() {
  
    // Create canvas of 400X400 px
    createCanvas(400, 400);
}
  
function draw() {
  
    // Set background color to green
    background('green');
  
    // No border to shapes
    noStroke();
  
    push();
    smooth(); // by Default
    ellipse(100, width / 2, 100, 200);
    pop();
  
    push();
    noSmooth(); // apply noSmooth()
    fill(238, 80, 71); // red color
    ellipse(300, width / 2, 100, 200);
    pop();
}

输出：