笔记十一（canvas颜色应用基础）

1、色彩合成

假设想通过红绿蓝三原色的三个数值合成一个完整有效的颜色值，可以借助以下公式：

var color = 0xFF << 16 | 0X55 << 8 | 0X33; //采用十六进制
var color = 255 <<16 | 88 << 8 | 10; //采用十进制亦可

2、提取三原色

假设想从一种颜色中提取每个独立的三原色的值：

red = color >> 16 & 0xFF;
green = color >> 8 & 0xFF;
blue = color & 0xFF;

这里封装两个与颜色相关的工具函数：

1. utils.colorToRGB接受一个表示颜色值的数字或十六进制字符串作为参数，然后提出独立的三原色，并将其拼接为一个CSS风格的函数作为返回值。此外还接受一个可选的第二个参数用于指定透明度值，该值必须为0~1内的小数。

utils.colorToRGB = function(color , alpha){
if(typeof color === 'string' && color[0] === '#'){
color = window.parseInt(color.slice(1),16);
}
alpha = (alpha === undefined) ? 1:alpha;
var  r = color >> 16 & 0xff,
g = color >> 8 & 0xff,
b = color & 0xff,
a = (alpha < 0) ? 0:((alpha > 1)? 1:alpha);
if(a === 1){
return "rgb(" + r + "," + g + "," + b + ")";
}else{
return "rgb("+ r + "," + "g" + "," + b + "," + a + ")";
}
};

utils.parseColor函数可以将一个颜色的数值转换为一个十六进制格式的字符串，也可以将一个十六进制格式的字符串还原为一个数值。调用该函数并传入一个十六进制数(0xff0000)，将返回字符串值(#ff0000)；传入一个CSS风格的十六进制字符串将原值返回。该函数还接受一个可选参数toNumber，该值为true时，函数返回一个数值型的颜色值。

utils.parseColor = function (color , toNumber){
if(toNumber === true){
if(typeof color === 'number'){
return (color | 0);
}
if(typeof color === 'string' && color[0] === '#'){
color = color.slice(1);
}
return window.parseInt(color ,16);
}else{
if(typeof color === 'number'){
color = '#' + ('000000' + (color | 0).toString(16)).substr(-6);
}
return color;
}
}

参见《HTML5+Javascript动画基础》。