p5.js | square()函数

p5.js是一个用于绘制图形和交互式应用程序的JavaScript库。其中，square()函数用于绘制正方形。

语法

square(x, y, size, [detail])

参数

• x：正方形左上角的x坐标。
• y：正方形左上角的y坐标。
• size：正方形的宽高。
• detail：（可选）指定细分的数量，用于平滑正方形的边缘。默认为0。

示例

以下代码演示了如何使用square()函数绘制一个红色的正方形：

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

function draw() {
  background(220);
  fill(255, 0, 0);
  square(100, 100, 200);
}

绘制结果如下图所示：

注意事项

• square()函数使用当前设置的填充颜色进行绘制。使用前需先通过fill()函数设置颜色。
• square()函数使用当前设置的轮廓颜色和轮廓粗细。使用前需先通过stroke()和strokeWeight()函数设置轮廓。
• 当指定detail参数时，它必须是大于等于0的整数。较大的detail值将导致渲染速度降低，但边缘更加平滑。

总结

square()函数是p5.js中绘制正方形的函数。它有多个参数，并且可以使用detail参数平滑边缘。开发人员可以根据自己的需求使用这个函数绘制各种类型的图形。