p5.js | rect()函数

rect()函数是 p5.js 中的一个内置函数，用于在屏幕上绘制矩形。一个矩形包含四个边和四个角。矩形的每个角都是 90 度。长方形对边的长度相等。

句法：

rect( x, y, w, h, tl, tr, br, bl )

或者

rect( x, y, w, h, detailX, detailY ) 

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

• x：用于设置矩形的 x 坐标。
• y：用于设置矩形的y坐标。
• w：用于设置矩形的宽度。
• h：用于设置矩形的高度。
• tl：可选参数，用于设置左上角的半径。
• tr：可选参数，用于设置右上角的半径。
• br：可选参数，用于设置右下角的半径。
• bl：可选参数，用于设置左下角的半径。
• detailX：用于设置x方向的段数。
• detailY：用于设置y方向的段数。

示例 1：

javascript

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

输出：

示例 2：

javascript

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

输出：

示例 3：

javascript

function setup() {
      
    // Create Canvas of given size
    createCanvas(400, 300);
  
}
  
function draw() {
      
    background(220);
      
    // Use color() function
    let c = color('green');
  
    // Use fill() function to fill color
    fill(c);
    
    // Draw a rectangle
    rect(50, 50, 300, 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/rect