轉換任意顏色為RGBA格式
前端編程過程中，經常會遇到要把各種顏色格式（比如 “red”、“#F00”、“#FF0000”等）轉換成RGBA格式，搜索網絡也可以發現一堆的解決方案：
此處介紹一種方法： 通過canvas的像素獲取方法，來獲取任意顏色的RGBA數值。大致步驟如下：
- 首先創建一個尺寸為1*1的canvas，并獲取canvas的繪制上下文ctx
- 設置ctx.fillStyle為指定的顏色
- 通過ctx.fillRect填充canvas
- 通過ctx.getImaegeData獲取Imagedata對象，并獲取其中的像素值，獲取的像素值正好是RGBA格式的。
示例代碼如下：
function getRgba(color) {
var canvas = document.createElement("canvas");
canvas.width = 1;
canvas.height = 1;
var ctx = canvas.getContext('2d');
ctx.fillStyle = color;
ctx.fillRect(0, 0, 1, 1);
var colorData = ctx.getImageData(0, 0, 1, 1).data;
return {
r: colorData[0],
g: colorData[1],
b: colorData[2],
a: colorData[3]
};
}
注意性能問題
需要注意的是，如果上述方法頻繁調用，則會有性能問題, 我公司一個小伙伴就出現過這樣的性能問題。因為代碼在頻繁的創建canvas對象, 不斷創建對象會有性能損耗，而JavaScript本身還需要在垃圾回收階段不斷的回收這些創建的對象，也是一次性能消耗。
好的處理方式是創建一個全局的canvas對象，每次都復用該對象。只用做很小的改動，參考下面的代碼 ：
var canvas = document.createElement("canvas");
canvas.width = 1;
canvas.height = 1;
var ctx = canvas.getContext('2d');
function getRgba(color) {
ctx.fillStyle = color;
ctx.fillRect(0, 0, 1, 1);
var colorData = ctx.getImageData(0, 0, 1, 1).data;
return {
r: colorData[0],
g: colorData[1],
b: colorData[2],
a: colorData[3]
};
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
