p5.js |绘制（）函数

draw()函数在 setup()函数之后调用。 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');
  
}

输出：