轉(zhuǎn)換任意顏色為RGBA格式
前端編程過程中，經(jīng)常會(huì)遇到要把各種顏色格式（比如 “red”、“#F00”、“#FF0000”等）轉(zhuǎn)換成RGBA格式，搜索網(wǎng)絡(luò)也可以發(fā)現(xiàn)一堆的解決方案：
此處介紹一種方法： 通過canvas的像素獲取方法，來(lái)獲取任意顏色的RGBA數(shù)值。大致步驟如下：
示例代碼如下：
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] }; }注意性能問題
需要注意的是，如果上述方法頻繁調(diào)用，則會(huì)有性能問題, 我公司一個(gè)小伙伴就出現(xià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í)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
