南芝 – 我才12岁（孤独、快乐的生活在自己的世界里）

在做一个小widget时，用canvas去创建一个渐变，我又想设置其透明度，那么我就需要获取到颜色的rgba值，但是没办法去控制每一个用户正确的输入rgb值，那太困难了，相信没几个人能准确的记得住rgb值，所以，只能我这边做下转换了，本来只是Opera用，扩展了下，让目前的各个浏览器都能正常使用，当然不是统一的方法，而是根据各自的优势去处理的。Firefox、Safari、Chrome浏览器表现的最优秀，直接就给我了我想要的，Opera只能给我十六进制值，而IE更差劲，要啥没啥，杯具啊！

JS Code：

/**
 * translate color value to rgb
 * @method toRGB
 * @param {String} color value
 */
function toRGB(color) {
	//如果输入的为rgb值直接返回
	if(color.indexOf(',') != -1) {
		return color;
	}
	if(!window.getComputedStyle) {
		//ie
		if(color.indexOf('#') != -1) {
			//十六进制
			var ncolor = color.length == 4 ? ('#' + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2) + color.charAt(3) + color.charAt(3)) : color;
		} else {
			//英文名称
			var enames = {'aqua':'rgb(0, 255, 255)','black':'rgb(0, 0, 0)','blue':'rgb(0, 0, 255)','fuchsia':'rgb(255, 0, 255)','gray':'rgb(128, 128, 128)','green':'rgb(0, 128, 0)','lime':'rgb(0, 255, 0)','maroon':'rgb(128, 0, 0)','navy':'rgb(0, 0, 128)','olive':'rgb(128, 128, 0)','orange':'rgb(255, 165, 0)','purple':'rgb(128, 0, 128)','red':'rgb(255, 0, 0)','silver':'rgb(192, 192, 192)','teal':'rgb(0, 128, 128)','white':'rgb(255, 255, 255)','yellow':'rgb(255, 255, 0)'};
			return enames[color];
		}
	} else {
		//创建临时节点
		var span = document.createElement('span');
		span.style.color = color;
		document.body.appendChild(span);
		var ncolor = window.getComputedStyle(span,null).getPropertyValue('color');
		document.body.removeChild(span);
		if(!window.opera) {
			//Firefox,Safari,Chrome
			return ncolor;
		}
	}
	//ie || Opera
	var to2 = parseInt(('0x' + ncolor.slice(1)),16);
	var r = to2 >> 16,
		g = parseInt('0000000000000000' + (to2 >> 8).toString(2).slice(-8),2),
                      //g = (to2 & 0x00ff00) >> 8,
		b = parseInt('0000000000000000' + to2.toString(2).slice(-8),2);
                      //b = to2 & 0x0000ff;
	return 'rgb(' + r + ',' + g + ',' + b + ')';
}

Demo：http://www.12sui.cn/test/rgb-0911.html

注：有一点比较散的是，Safari、Chrome、Opera、IE创建临时节点后，必须插入到文档里才能获取到style值，只有Firefox不需要这么做，好散。

标签： canvas, RGB

这篇文章发布于 2009年11月2日，星期一，21:06，归类于 JavaScript。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。