问如何判断fillStyle是否被指定为非法颜色？

EN

根据HTML画布2D上下文规范

8填充和笔画样式 如果该值是字符串，但不能解析为CSS值，或者既不是字符串、CanvasGradient，也不是CanvasPattern，则必须忽略，并且属性必须保留其以前的值。

我假设您只对有效的CSS颜色值如这里所定义的感兴趣。至少有三个选项可以验证CSS颜色值：

• 通过比较分配前后的context.fillStyle，如果两者相等，则用户提供了相同或无效的颜色值。
• 通过人工验证： const colors =新集(“aliceblue”、"antiquewhite“、"aqua”、"aquamarine“、"azure”、"beige“、"bisque”、"black“、"blanchedalmond”、"blue“、”blue紫色“、"brown”、“bur坞”、"cadetblue“、"chartreuse”、“巧克力”、“珊瑚”、"cornflowerblue“、”corn丝绸“、"crimson”、"cyan“、”深蓝色“、”深蓝色“、”深色金棒“、”深灰色“、“深绿色”、“深灰色”、“深色卡其基”、“深色洋红色”、“深橄榄绿色”、“深色橙色”、“暗兰花”、“暗红色”、“深色鲑鱼”、“暗色海蓝”、“深石蓝”、“深灰色”、“深灰色”、“深灰色”、“深红色”、“深蓝色”、“灰灰色”、“灰灰”、“多德格尔蓝”、“耐火砖”、“花白色”、“前绿色”、“未来”、“盖恩斯伯罗”、“幽灵白色”，“黄金”、“金棒”、“灰色”、“绿色”、“灰色”、“蜜露”、“火红”、“深红”、“靛蓝”、“象牙”、“卡其色”、“薰衣草”、“薰衣草”、“草坪绿”、“柠檬皮”、“蓝光蓝”、“轻珊瑚”、“轻盈青色”、“淡金色”、“淡灰色”、“淡绿色”、“淡灰色”、“淡粉色”、“轻鲑鱼”、“轻色鱼”、“亮蓝色”、“浅灰色”、“浅蓝色”、“浅蓝色”、“淡黄色”、“石灰”、“灰绿色”、“亚麻布”、“洋红”、“栗色”、“中蓝色”、“中蓝色”、“平庸”、“平庸兰花”、“中紫色”、“中色色”、“中色蓝”、“中绿色”、“中青绿色”、“中青绿色”、“中紫红色”、“夜蓝色”、“薄荷霜”、“迷迭香”、“莫卡辛”、“纳瓦乔白”、“海军”、“海军蓝”、“海军蓝”“橄榄”、“橙色”、“桔黄色”、“兰花”、“棕榈”、“古绿色”、“古绿松石”、“古紫罗兰”、“木瓜鞭”、“桃红色”、“秘鲁”、“粉红色”、“李子”、“粉蓝色”、“紫色”、“重贝克尔”、“红色”、“玫瑰色”、“皇家蓝”、“鞍棕色”、“鲑鱼”、“沙褐色”、“塞格伦”、“塞什尔”、“西耶纳”“银色”、“天蓝色”、“蓝蓝”、“蓝灰色”、“蓝灰色”、“雪”、“春绿”、“钢蓝”、“褐色”、“提尔”、“蓟”、“番茄”、“绿松石”、“紫罗兰”、“小麦”、“白色”、“白烟”、“黄色”、“黄绿色”)；colors.has(input.toLowerCase())；
• 通过设置和检查临时HTMLElement的样式。

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

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

无效的颜色字符串将被解释为最后的有效颜色(或#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!上测试