p5.js | html()函数

html()函数用于通过替换任何现有的 html 来设置元素的内部 HTML。如果第二个参数的值为 true，则附加 html 而不是替换现有的 html 元素。如果此函数不包含任何参数，则它返回元素的内部 HTML。

注意：此函数需要 p5.dom 库。因此，在 index.html 文件的 head 部分添加以下行。

句法：

html()

或者

html( html, append )

参数：

• html：此参数以字符串格式保存 HTML 元素，需要放置在元素内。
• append：此参数保存布尔值以附加现有的 HTML 元素。

返回值：此函数返回一个包含元素内部 HTML 的字符串。

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

示例 1：

function setup() {
      
    // Create a canvas of given size
    createCanvas(400, 200);
      
    // Set background color
    background('green');
      
    var div = createDiv('');
      
    // Use html() function
    div.html('Welcome to GeeksforGeeks');   
    
    // Set the position of div element
    div.position(60, 80); 
    
    // Set font-size of text
    div.style('font-size', '24px');
    
    // Set font-color of text
    div.style('color', 'white');
  
} 

输出：

示例 2：

function setup() {
      
    // Create canvas of given size
    createCanvas(400, 200);
      
    // Set background color
    background('green');
      
    var div = createDiv('').size(200, 70);
  
    // Use html() function    
    div.html('Welcome to GeeksforGeeks', true);   
    
    // Set the position of div element
    div.position(100, 60); 
    
    // Set font-size of text
    div.style('font-size', '24px');
    
    // Set font-color of text
    div.style('color', 'white');
    
    div.style('border', '1px solid white');
    
    div.style('text-align', 'center');
  
} 

输出：