如何判斷fillStyle是否被指定爲非法顏色？

var c = document.getElementById("canvasID"); var g = c.getContext("2d"); g.fillStyle = "pukeYellow"; //illegal color

這能檢測？ g.fillStyle成爲一些哨點值？

想象一下，您正在編寫一個Web應用程序，要求用戶輸入已命名的顏色，然後顯示顏色。我們怎麼能告訴用戶他做了一個boo-boo？

2017-06-02 ncmathsadist

它將返回一個十六進制的顏色，否則它會填充黑色。 – Akxe

爲什麼不只是測試它？也許它變成黑色或白色，你可以檢測到。也許你可以檢查輸入，我的意思是rgb通常在0到255之間，可選不透明度從0到1.如果你使用十六進制，它從00到ff3-4次，例如#RRGGBB [AA] ..如果檢測到無效輸入，則只需編寫描述該問題的錯誤消息 –

難道您不能僅根據[所有有效顏色列表]驗證用戶輸入（https://developer.mozilla.org/en-US/docs/網絡/ CSS /顏色？v =例如＃Formal_syntax）？ –

根據the HTML Canvas 2D Context specification：

8填充和筆觸樣式

如果該值是一個字符串，但不能被解析爲一個CSS值，或者既不是一個字符串，一個CanvasGradient，也不是CanvasPattern，那麼它必須被忽略，並且屬性必須保留其以前的值。

我假設您只對有效的CSS顏色值as defined here感興趣。您至少有三種選擇來驗證CSS顏色值：

通過前和分配後比較context.fillStyle，如果二者相等用戶要麼提供一個相同的或無效的顏色值

通過手動驗證：

const colors = new Set(["aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", "beige", "bisque", "black", "blanchedalmond", "blue", "blueviolet", "brown", "burlywood", "cadetblue", "chartreuse", "chocolate", "coral", "cornflowerblue", "cornsilk", "crimson", "cyan", "darkblue", "darkcyan", "darkgoldenrod", "darkgray", "darkgreen", "darkgrey", "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen", "darkslateblue", "darkslategray", "darkslategrey", "darkturquoise", "darkviolet", "deeppink", "deepskyblue", "dimgray", "dimgrey", "dodgerblue", "firebrick", "floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite", "gold", "goldenrod", "gray", "green", "greenyellow", "grey", "honeydew", "hotpink", "indianred", "indigo", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue", "lightcoral", "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgreen", "lightgrey", "lightpink", "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightslategrey", "lightsteelblue", "lightyellow", "lime", "limegreen", "linen", "magenta", "maroon", "mediumaquamarine", "mediumblue", "mediumorchid", "mediumpurple", "mediumseagreen", "mediumslateblue", "mediumspringgreen", "mediumturquoise", "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin", "navajowhite", "navy", "oldlace", "olive", "olivedrab", "orange", "orangered", "orchid", "palegoldenrod", "palegreen", "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue", "purple", "rebeccapurple", "red", "rosybrown", "royalblue", "saddlebrown", "salmon", "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue", "slateblue", "slategray", "slategrey", "snow", "springgreen", "steelblue", "tan", "teal", "thistle", "tomato", "turquoise", "violet", "wheat", "white", "whitesmoke", "yellow", "yellowgreen"]); 
colors.has(input.toLowerCase());

通過setting and checking the style of a temporary HTMLElement。

我推薦前兩種解決方案之一。

來源

2017-06-02 22:53:42

和我一樣，你需要檢查新顏色是否與舊顏色不一樣...... – Akxe

@Akxe Yup，這是我可能的解決方案列表中的第一點。缺點：它不允許區分無效的顏色或與之前設置的顏色相同的顏色，而無需額外的邏輯 –

實驗揭示了這一點。如果您指定非法顏色，則分配僅會失敗。圖形上下文的狀態不變。正如其典型的JavaScript一樣，JavaScript只是忽略了你的錯誤，並且僞造了。您也可以嘗試this web app中的顏色。如果您在十六進制代碼前加上＃，應用程序還會顯示與十六進制代碼相關的顏色。

來源

2017-06-02 22:22:11 ncmathsadist

無效的顏色字符串將被解釋爲最後一個有效顏色（或#000000，黑色）。

這snipet應該足夠大多數usecases。

var canvas = document.createElement("canvas") 
 
var context = canvas.getContext("2d") 
 
context.fillStyle = "#ff0000" 
 
console.log(testColor("yellow")) 
 
console.log(testColor("pukeYellow")) 
 
console.log(testColor("red")) 
 
console.log(context.fillStyle) 
 

 
function testColor(color){ 
 
    var tmp = context.fillStyle 
 
    context.fillStyle = color 
 
    var result = context.fillStyle == tmp 
 
    if(result){ 
 
     var tmp2 = tmp == '#ffffff' ? '#000000' : '#ffffff' 
 
     context.fillStyle = tmp2 
 
     context.fillStyle = color 
 
     result = (context.fillStyle+'') == (tmp2+'') 
 
    } 
 
    context.fillStyle = tmp 
 
    return !result 
 
}

警告：僅在鉻測試！

來源

2017-06-02 22:24:34 Akxe

如何判斷fillStyle是否被指定爲非法顏色？

回答

相關問題