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

p5.js中的createColorPicker()函數用於在DOM(文檔對象模型)中創建顏色選擇器元素以獲取輸入顏色。 .color()方法用於獲取當前選擇的顏色。此函數包括p5.dom庫。在頭部添加以下語法。

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

用法:

createColorPicker( value )

參數：此函數接受單個參數值，該參數值保留顏色選擇器的默認顏色。

例：本示例使用顏色選擇器對象設置背景顏色。

// Create a variable for color-picker object 
var color_picker; 
  
function setup() { 
    
    // Create a canvas 
    createCanvas(400,400); 
      
    // Create a color-picker object  
    color_picker = createColorPicker("green"); 
} 
  
function draw() { 
      
    // Set the background-color as 
    // chosen by the color-picker 
    background(color_picker.color()); 
}

輸出：

選擇顏色之前：
從顏色選擇器中選擇顏色：
選擇顏色後：

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

相關用法

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