当前位置: 首页>>编程示例 >>用法及示例精选 >>正文


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。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。