如何判断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是否被指定为非法颜色？

回答

相关问题