如何将红色,绿色和蓝色的整数字节值转换为十六进制字符串,然后将其分配给上下文以便渲染到HTML5画布上?
例如,转换青色,
var r = 0;
var g = 255;
var b = 255;
用于分配上下文填充颜色的十六进制字符串。
this.context.fillStyle = '#00FFFF';
还是有更好的方法来完成这项工作吗?
答案 0 :(得分:26)
要将数字转换为十六进制,可以使用内置的toString(16)函数。 简单的代码:
function convert(integer) {
var str = Number(integer).toString(16);
return str.length == 1 ? "0" + str : str;
};
function to_rgb(r, g, b) { return "#" + convert(r) + convert(g) + convert(b); }
var color = to_rgb(r, g, b);
答案 1 :(得分:16)
只需使用RGB值,例如:
this.context.fillStyle = "rgb(0,255,255)";
答案 2 :(得分:11)
我认为,最简单的方法是:
var g = 255; g.toString(16); //gives "ff"
使用提供语言的功能。
答案 3 :(得分:1)
function pad(number, length) {
var str = '' + number;
while (str.length < length) str = '0' + str;
return str;
}
function toRGBHex(r,g,b) {
return pad(r.toString(16),2) + pad(g.toString(16),2) + pad(b.toString(16),2);
}
答案 4 :(得分:1)
要将您的个别RGB值转换为十六进制颜色,您可以使用此功能,但使用"rgb("+r+","+g+","+b+")"
更有意义。
function rgbToHex(r,g,b) {
return "#"+("00000"+(r<<16|g<<8|b).toString(16)).slice(-6);
}
答案 5 :(得分:1)
您可以使用.toString(16)
let decimalNumber = 255;
decimalNumber.toString(16)
// Expected output is "FF"
或者如果你想转换二进制基数
let decimalNumber = 24;
decimalNumber.toString(2)
// Expected output is "1010"
答案 6 :(得分:1)
将一个整数转换为十六进制字节,例如:
const g = 255;
gPadded = Number(g).toString(16).padStart(2, "0");
使用数组会更好:
const r = 0;
const g = 255;
const b = 255;
const color = [r, g, b];
this.context.fillStyle = "#" + color.map(i=>i.toString(16).padStart(2, "0")).join("");
答案 7 :(得分:0)
您可以为此转换编写自己的方法 -
// function to generate the hex code
function getHex(dec)
{
var hexArray = new Array( "0", "1", "2", "3",
"4", "5", "6", "7",
"8", "9", "A", "B",
"C", "D", "E", "F" );
var code1 = Math.floor(dec / 16);
var code2 = dec - code1 * 16;
var decToHex = hexArray[code2];
return (decToHex);
}
原始来源 - http://programming.top54u.com/post/Javascript-Convert-Decimal-to-Hex.aspx