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

createButton()函數用於在DOM(文檔對象模型)中創建按鈕元素。 .size()函數用於設置按鈕元素的大小。 .mousePressed()函數用於指定按下鼠標按鈕時的行為。
注意：此函數需要p5.dom庫。因此，在index.html文件的開頭部分添加以下行。

<script src= 
"https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"> 
</script>

用法:

createButton( label, value )

參數：該函數接受上述和以下描述的兩個參數：

label:此參數保留按鈕上顯示的標簽。
value:此參數保存按鈕的值。

返回值：它返回一個指針元素，其中包含創建的節點對象。

注意：該按鈕元素可以與各種JavaScript事件鏈接，例如按下鼠標，單擊鼠標，釋放鼠標等。

例：本示例使用createButton()函數通過p5.js按鈕元素更改背景顏色。

// Create a variable for button object 
var color_button; 
   
// Create a function to change the background-color 
function change_background() { 
      
    // Pick a random number for r value 
    r = random(255); 
      
    // Pick a random number for g value 
    g = random(255); 
      
    // Pick a random number for b value 
    b = random(255); 
      
    // Set a random background-color 
    background(r, g, b); 
} 
   
function setup() { 
      
    // Create a canvas 
    createCanvas(400, 400); 
      
    // Set an initial background-color 
    background(50); 
      
    // Create the button 
    color_button = createButton("Change Color"); 
      
    // Position the button 
    color_button.position(150, 200); 
      
    // When the button is clicked change_background() 
    // function is called 
    color_button.mouseClicked(change_background); 
}

輸出：

單擊按鈕後：
再次單擊按鈕後：

參考： https://p5js.org/reference/#/p5/createButton

相關用法

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