轉(zhuǎn)換任意顏色為RGBA格式
前端編程過(guò)程中，經(jīng)常會(huì)遇到要把各種顏色格式（比如 “red”、“#F00”、“#FF0000”等）轉(zhuǎn)換成RGBA格式，搜索網(wǎng)絡(luò)也可以發(fā)現(xiàn)一堆的解決方案：
此處介紹一種方法： 通過(guò)canvas的像素獲取方法，來(lái)獲取任意顏色的RGBA數(shù)值。大致步驟如下：
- 首先創(chuàng)建一個(gè)尺寸為1*1的canvas，并獲取canvas的繪制上下文ctx
- 設(shè)置ctx.fillStyle為指定的顏色
- 通過(guò)ctx.fillRect填充canvas
- 通過(guò)ctx.getImaegeData獲取Imagedata對(duì)象，并獲取其中的像素值，獲取的像素值正好是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]
};
}
注意性能問(wèn)題
需要注意的是，如果上述方法頻繁調(diào)用，則會(huì)有性能問(wèn)題, 我公司一個(gè)小伙伴就出現(xiàn)過(guò)這樣的性能問(wèn)題。因?yàn)榇a在頻繁的創(chuàng)建canvas對(duì)象, 不斷創(chuàng)建對(duì)象會(huì)有性能損耗，而JavaScript本身還需要在垃圾回收階段不斷的回收這些創(chuàng)建的對(duì)象，也是一次性能消耗。
好的處理方式是創(chuàng)建一個(gè)全局的canvas對(duì)象，每次都復(fù)用該對(duì)象。只用做很小的改動(dòng)，參考下面的代碼 ：
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]
};
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
