2011-01-20 130 views
21

如何将红色,绿色和蓝色的整数字节值转换为十六进制字符串,然后可以将该字符串分配给用于呈现到HTML5画布上的上下文?在JavaScript中将整数转换为十六进制字符串

例如,转换青色,

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

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

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

或者还有更好的方法来完成这个吗?

回答

16

只需使用RGB值,比如:

this.context.fillStyle = "rgb(0,255,255)"; 
+0

最好的答案总是最简单的! – 2011-01-20 09:38:43

+0

但是,谢谢所有回答的人,他们都是有趣的答案,对我的知识和理解很有价值。每个+1。 – 2011-01-20 09:41:18

+0

这是跨浏览器兼容吗? – 2011-01-20 09:50:23

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

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); 
} 
24

要转换数字为十六进制,可以使用内置的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); 
11

我认为,最简单的方法是:

 
var g = 255; 
g.toString(16); //gives "ff" 

使用,让语言的功能。

1

若要将各个RGB值转换为十六进制颜色,可以使用此功能,但使用"rgb("+r+","+g+","+b+")"代替它更有意义。

function rgbToHex(r,g,b) { 
    return "#"+("00000"+(r<<16|g<<8|b).toString(16)).slice(-6); 
} 
相关问题