Javascript 如何判断fillStyle是否被指定了非法颜色？

假设有人试图分配如下内容

var c=document.getElementById（“canvasID”）；
var g=c.getContext（“2d”）；
g、 fillStyle=“pukeYellow”//非法颜色

这能被检测到吗？

g.fillStyle

是否成为某种前哨价值

---

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

实验揭示了这一点。如果指定了非法的颜色，则指定将失败。图形上下文的状态不变。JavaScript，就像它的典型方式一样，只是忽略了你的错误，然后继续前进。你也可以试试这种颜色。如果在十六进制代码前面加上一个#，应用程序还将显示与十六进制代码相关的颜色。

无效的颜色字符串将被解释为最后一个有效的颜色（或

#000000

，黑色）

对于大多数使用情况，这个snipet应该是足够的

var canvas=document.createElement（“画布”）
var context=canvas.getContext（“2d”）
context.fillStyle=“#ff0000”
log（testColor（“黄色”））
log（testColor（“pukeYellow”））
log（testColor（“红色”））
console.log（context.fillStyle）
函数testColor（颜色）{
var tmp=context.fillStyle
context.fillStyle=颜色
var result=context.fillStyle==tmp
如果（结果）{
var tmp2=tmp='#ffffff'？'#000000'：'#ffffff'
context.fillStyle=tmp2
context.fillStyle=颜色
结果=（context.fillStyle+''）=（tmp2+''）
}
context.fillStyle=tmp
返回！结果
}

根据：

8填充和笔划样式

如果值是字符串，但无法解析为CSS值，或者既不是字符串、CanvasGradient，也不是CanvasPattern，则必须忽略它，并且属性必须保留其以前的值

我假设您只对有效的CSS颜色值感兴趣。您至少有三个选项可以验证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());
  

• 通过

---

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

它将返回该颜色的十六进制，否则将填充黑色。为什么不测试一下呢？也许它会变成你能察觉到的黑色或白色。也许你可以检查输入，我的意思是rgb通常在0到255之间，可选的不透明度从0到1。如果您使用十六进制从00到ff 3-4次，例如#RRGGBB[AA]。。如果检测到无效输入，只需编写一条错误消息来描述问题。难道你就不能根据？le_m验证用户输入吗？我希望不必这样做，但这可能是唯一可行的解决方案。pukeYellow有什么违法的？请说明相关法律、法规或细则。也许你的意思是无效？@Akxe-Yup，这是我可能的解决方案列表中的第一点。缺点：它不允许在没有附加逻辑的情况下区分无效的颜色或与先前设置的颜色完全相同的颜色