p5.js draw()用法及代码示例

在setup()函数之后调用draw()函数。 draw()函数用于在块内执行代码，直到程序停止或调用noLoop()。如果该程序在setup()函数中不包含noLoop()函数，则draw()函数在停止之前仍将执行一次。应始终通过noLoop()，redraw()和loop()函数进行控制。

用法:

draw()

以下示例说明了p5.js中的draw()函数：

示例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  
    var cvs = createCanvas(600, 250); 
} 
  
function draw() { 
    
    // Set the background color 
    background('green');  
    
    // Use createDiv() function to 
    // create a div element 
    var myDiv = createDiv('GeeksforGeeks'); 
    
    var myDiv1 = createDiv('A computer science portal for geeks'); 
    
    // Use child() function 
    myDiv.child(myDiv1); 
    
    // Set the position of div element 
    myDiv.position(150, 100);   
    
    myDiv.style('text-align', 'center'); 
    
    // Set the font-size of text 
    myDiv.style('font-size', '24px'); 
    
    // Set the font color 
    myDiv.style('color', 'white'); 
  
}

输出：

相关用法

注：本文由纯净天空筛选整理自jit_t大神的英文原创作品 p5.js | draw() Function。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。