轉換任意顏色為RGBA格式
前端編程過程中，經常會遇到要把各種顏色格式（比如 “red”、“#F00”、“#FF0000”等）轉換成RGBA格式，搜索網絡也可以發現一堆的解決方案：
此處介紹一種方法： 通過canvas的像素獲取方法，來獲取任意顏色的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] }; }以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
