p5.js中的hue()函數用於從顏色或像素陣列中提取HSB和HSL色調值。
用法:
hue(c)
參數:該函數接受單個參數c,該參數存儲p5.Color對象,顏色分量或CSS顏色。
以下程序說明了p5.js中的hue()函數:
示例1:本示例使用hue()函數從顏色或像素陣列中提取HSB和HSL色調值。
function setup() {
// Create Canvas of size 300*80
createCanvas(300, 80);
}
function draw() {
// Set background color
background(220);
// Initialize color mode to HSB
colorMode(HSB, 255);
// Initialize the parameter
let c = color(0, 126, 100);
// Sets 'value' to 0
let value = hue(c);
// Set font size
textSize(16);
// Set font color
fill(color('red'));
// Display result
text("Hue Value is : " + value, 50, 30);
}
輸出:
示例2:本示例使用hue()函數從顏色中提取HSB和HSL色相值,並將其填充為灰度整數值。
function setup() {
// Create Canvas of size 300*180
createCanvas(300, 180);
}
function draw() {
// Set background color
background(220);
// Initialize color mode to HSB
colorMode(HSB, 255);
// Initialize the parameter
let c = color(56, 126, 10);
// Sets 'value' to 56
let value = hue(c);
// Fill the hue value as grayscale
fill(value);
// Create rectangle
rect(50, 15, 35, 70);
// Display result
text("Value of Hue is : " + value, 22, 110);
}
輸出:
參考: https://p5js.org/reference/#/p5/hue
相關用法
- p5.js day()用法及代碼示例
- PHP dir()用法及代碼示例
- PHP each()用法及代碼示例
- PHP each()用法及代碼示例
- p5.js second()用法及代碼示例
- p5.js int()用法及代碼示例
- d3.js d3.max()用法及代碼示例
- PHP Ds\Map put()用法及代碼示例
- p5.js str()用法及代碼示例
- p5.js arc()用法及代碼示例
- d3.js d3.hcl()用法及代碼示例
- d3.js d3.lab()用法及代碼示例
注:本文由純淨天空篩選整理自sarthak_ishu11大神的英文原創作品 p5.js | hue() function。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。