JavaScript中如何取得CSS/HTML命名顏色的RGB值
P粉557957970
P粉557957970 2023-11-06 09:05:50
0
2
676

我已經建立了一個名為[name-rgb]的Javascript物件。你的基本:

namedColors = {
  AliceBlue: [240, 248, 255],
  AntiqueWhite: [250, 235, 215],
  ...

物件。但我意識到我應該能夠輸入一個名字字串,例如"AliceBlue",然後讓JavaScript找到它的某種RGB表示(十六進位也可以)。我知道瀏覽器中至少有140個隱藏的命名顏色,但我似乎找不到它們。

有沒有一種CSS或"style=..."的技巧可以讓我找一個顏色名字的RGB表示?

P粉557957970
P粉557957970

全部回覆(2)
P粉052724364

這是我最終得出的解決方案。我意識到顏色有兩種類型:css字串和webgl類型數組(通常是4個浮點數或整數,取決於情況)。

算了,讓瀏覽器自己處理吧:創建一個1x1的畫布,用任何字串顏色填滿它,取得像素,並將其解構為rgba數組。以下有兩個實用工具,用於建立1x1的2d畫布ctx。

#根据任何合法的CSS颜色返回一个RGB数组,否则返回null。
#http://www.w3schools.com/cssref/css_colors_legal.asp
#字符串可以是CadetBlue,#0f0,rgb(255,0,0),hsl(120,100%,50%)
#rgba/hsla形式也可以,但我们不返回a。
#注意:浏览器自己说话:我们只需将1x1的画布fillStyle设置为字符串并创建一个像素,返回r,g,b值。
#警告:r=g=b=0可能表示非法字符串。我们测试了一些明显的情况,但要注意意外的[0,0,0]结果。
ctx1x1: u.createCtx 1, 1 #跨调用共享。闭包封装更好吗?
stringToRGB: (string) ->
  @ctx1x1.fillStyle = string
  @ctx1x1.fillRect 0, 0, 1, 1
  [r, g, b, a] = @ctx1x1.getImageData(0, 0, 1, 1).data
  return [r, g, b] if (r+g+b isnt 0) or
    (string.match(/^black$/i)) or
    (string in ["#000","#000000"]) or
    (string.match(/rgba{0,1}\(0,0,0/i)) or
    (string.match(/hsla{0,1}\(0,0%,0%/i))
  null

我喜歡它的地方在於瀏覽器自己說話。任何合法的字串都可以正常工作。唯一的缺點是,如果字串非法,你會得到黑色,所以需要做一些檢查。錯誤檢查不是很好,但在我的使用中不需要它。

實用工具函數:

#创建一个给定宽度/高度的新画布
createCanvas: (width, height) ->
  can = document.createElement 'canvas'
  can.width = width; can.height = height
  can
#与上述相同,但返回上下文对象。
#注意ctx.canvas是ctx的画布,可以用作图像。
createCtx: (width, height) ->
  can = @createCanvas width, height
  can.getContext "2d"
P粉311617763

最簡單的JavaScript函數:

function nameToRgba(name) {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    context.fillStyle = name;
    context.fillRect(0,0,1,1);
    return context.getImageData(0,0,1,1).data;
}
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!