p5.js square()用法及代碼示例

square()函數是p5.js中的內置函數，用於在屏幕上繪製正方形。一個正方形包含四個相等的邊和每個90度的四個角度。這是寬度和高度相等的矩形的特殊情況。

用法:

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

參數：該函數接受許多如上所述和以下描述的參數：

x:用於設置正方形的x坐標。
y:用於設置正方形的y坐標。
s:用於設置正方形邊的大小。
tl:它是可選參數，用於設置左上角的半徑。
tr:它是可選參數，用於設置top-right角的半徑。
br:它是可選參數，用於設置bottom-right角的半徑。
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://p5js.org/reference/#/p5/square

相關用法

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