在JavaScript中将整数转换为十六进制字符串

时间:2011-01-20 09:22:36

标签: javascript hex

如何将红色,绿色和蓝色的整数字节值转换为十六进制字符串,然后将其分配给上下文以便渲染到HTML5画布上?

例如,转换青色,

var r = 0;
var g = 255;
var b = 255;

用于分配上下文填充颜色的十六进制字符串。

this.context.fillStyle = '#00FFFF';

还是有更好的方法来完成这项工作吗?

8 个答案:

答案 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"

source MDN .toString(16)

答案 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