Javascript 当给定p5.js颜色元素时,是否有方法将十六进制值更改为RGB值
在发现我必须使用p5.js而不是jquery之后,我正在重写我的一个项目。脚本应该接受HTML颜色选择器的输入,我认为它是十六进制或颜色元素,并将其转换为rgb值以更改笔划和填充值。我已经调试到知道this.setColor或this.colorAlpha返回255,尽管得到了不同的十六进制值。非常感谢Javascript 当给定p5.js颜色元素时,是否有方法将十六进制值更改为RGB值,javascript,p5.js,Javascript,P5.js,在发现我必须使用p5.js而不是jquery之后,我正在重写我的一个项目。脚本应该接受HTML颜色选择器的输入,我认为它是十六进制或颜色元素,并将其转换为rgb值以更改笔划和填充值。我已经调试到知道this.setColor或this.colorAlpha返回255,尽管得到了不同的十六进制值。非常感谢 function ColourPalette() { //make the start colour be black this.selectedColour = "#
function ColourPalette() {
//make the start colour be black
this.selectedColour = "#000000";
this.alpha = 1
//load in the colours
this.loadColours = function() {
var aColour = document.getElementById("colourInput").value
//set the selected colour to the colourInput calue with current alpha
this.setColour(this.colourAlpha(aColour, this.alpha));
console.log(aColour)
console.log(this.colourAlpha(aColour, this.alpha))
};
this.setColour = function (color){
this.selectedColour = color
//set fill and stroke to selectedColour value
fill(this.selectedColour);
stroke(this.selectedColour);
console.log(this.selectedColour);
//Create hex colour string and pass it into the colourInput element
//to make sure it is set to the currently selected colour
var redHex = red(this.selectedColour).toString(16);
if (redHex.length == 1) {
redHex = "0" + redHex
};
var greenHex = green(this.selectedColour).toString(16);
if (greenHex.length == 1) {
greenHex = "0" + greenHex
};
var blueHex = blue(this.selectedColour).toString(16);
if (blueHex.length == 1) {
blueHex = "0" + blueHex
};
document.getElementById("colourInput").value = "#" + redHex + greenHex + blueHex;
console.log(document.getElementById("colourInput").value)
};
// Creates a new colour with RGB values from a colour and a value from alpha
this.colourAlpha = function(aColour, alpha){
var c = color(aColour);
console.log(c)
return 'rgba(' + [red(c), green(c), blue(c), alpha].join('.') + ')';
}
//call the loadColours function now it is declared
this.loadColours();
//Load the colour everytime the colour input is changed
const selectElement = document.querySelector('#colourInput');
selectElement.addEventListener('change', (event) => { this.loadColours(); });
};```
无需任何代码即可完成从十六进制到RGB的转换: 取前2位数字,并将其从十六进制值转换为十进制值,这将给出RGB的R值 取2个中间数字的十六进制代码并转换为十进制,这就给出了G值 将最后一个数字转换为十进制,得到B值 例如。 十六进制#578955 十进制0x57=87(R) 十进制0x89=137(G) 十进制0x55=85(B)
因此,RGB中的578955是RGB(87137,85)我在试图解决一个问题时发现了这个可爱的解决方案:)
函数更改HexatorGBA(){
h3.style.color=输入1.value;
input2.value=h3.style.color;
}
改变六面体b()代码>
键入六色,然后单击按钮
去