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：

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：

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：

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://p5js.org/reference/#/p5/rect

相關用法

注：本文由純淨天空篩選整理自jit_t大神的英文原創作品 p5.js | rect() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。