筆記十一（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 + ")";
    }
};

1. 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動畫基礎》。