p5.js | square()函数

square()函数是 p5.js 中的一个内置函数，用于在屏幕上绘制正方形。正方形包含四个相等的边和四个角，每个角均为 90 度。这是宽度和高度相等的矩形的特例。

句法：

square( x, y, s, tl, tr, br, bl )

参数：此函数接受许多参数，如上所述，如下所述：

x：用于设置正方形的x坐标。
y：用于设置正方形的y坐标。
s：用于设置正方形的边长。
tl：可选参数，用于设置左上角的半径。
tr：可选参数，用于设置右上角的半径。
br：可选参数，用于设置右下角的半径。
bl：可选参数，用于设置左下角的半径。

示例 1：

function setup() { 
       
    // Create Canvas of given size 
    createCanvas(300, 300); 
   
} 
   
function draw() { 
       
    background(220);
       
    // Use color() function
    let c = color('green');
   
    // Use fill() function to fill color
    fill(c);
     
    // Draw a square
    square(50, 50, 200);
     
}

输出：

示例 2：

function setup() { 
       
    // Create Canvas of given size 
    createCanvas(300, 300); 
   
} 
   
function draw() { 
       
    background(220);
       
    // Use color() function
    let c = color('green');
   
    // Use fill() function to fill color
    fill(c);
     
    // Draw a square
    square(50, 50, 200, 20);
     
}

输出：

示例 3：

function setup() { 
       
    // Create Canvas of given size 
    createCanvas(300, 300); 
   
} 
   
function draw() { 
       
    background(220);
       
    // Use color() function
    let c = color('green');
   
    // Use fill() function to fill color
    fill(c);
     
    // Draw a square
    square(50, 50, 200, 10, 20, 30, 40);
     
}

输出：

在线编辑器： https://editor.p5js.org/
环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

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