如何判断 fillStyle 是否被分配了非法颜色？答案

【问题标题】：How do you tell if fillStyle has been assigned an illegal color?如何判断 fillStyle 是否被分配了非法颜色？
【发布时间】：2017-06-02 21:41:58
【问题描述】：

假设有人尝试如下分配

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

可以检测到吗？ g.fillStyle 会成为一些哨兵值吗？

假设您正在编写一个 Web 应用程序，该应用程序要求用户指定颜色，然后显示该颜色。我们如何告诉用户他发出了嘘声？

【问题讨论】：

它将返回该颜色的十六进制，否则它将用黑色填充。
为什么不直接测试呢？也许它会变成黑色或白色，您可以检测到。也许你可以检查输入，我的意思是 rgb 通常在 0 到 255 之间，可选不透明度从 0 到 1。如果你使用十六进制，它从 00 到 ff 3-4 次，例如 #RRGGBB[AA] .. 如果无效检测到输入只需写一条描述问题的错误消息
您不能仅根据list of all valid colors 验证用户输入吗？
@le_m 我希望不必这样做，但这可能是唯一可行的解决方案。
pukeYellow 有什么违法之处？请说明相关的法律、法规或章程。也许你的意思是无效？

标签： javascript canvas colors

【解决方案1】：

根据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。

我推荐前两种解决方案之一。

【讨论】：

@Akxe 是的，这是我可能的解决方案列表中的第一点。缺点：它不允许在没有额外逻辑的情况下区分无效颜色或与之前设置的颜色相同的颜色

【解决方案2】：

无效颜色字符串将被解释为最后一个有效颜色（或#000000，黑色）。

这段代码对于大多数用例来说应该足够了。

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
}

警告：仅在 chrome 上测试！

【讨论】：

【解决方案3】：

实验揭示了这一点。如果您分配非法颜色，则分配将失败。图形上下文的状态没有改变。 JavaScript，就像它的典型方式一样，只是忽略你的错误并继续前进。你也可以试试this web app的颜色。如果您在十六进制代码前加上#，该应用程序还将显示与十六进制代码相关的颜色。

【讨论】：