Предположим, что кто-то пытается присвоить следующее
var c = document.getElementById("canvasID"); var g = c.getContext("2d"); g.fillStyle = "pukeYellow";//illegal color
Может ли это быть обнаружено? g.fillStyle
становится некоторым дозорным значением?
Представьте, что вы пишете веб-приложение, которое запрашивает у пользователя именованный цвет, а затем отображает цвет. Как мы можем сказать пользователю, что он сделал boo-boo?
Согласно спецификации HTML Canvas 2D Context:
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());
Через установку и проверку стиля временного элемента HTMLElement.
Я рекомендую одно из первых двух решений.
Неверная строка цвета будет интерпретирована как последний действительный цвет (или #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
}
Предупреждение: Протестировано только на хром!
Эксперимент показывает это. Если вы назначаете нелегальный цвет, присваивание просто терпит неудачу. Состояние графического контекста не изменилось. JavaScript, как кажется типичным для его манеры, просто игнорирует вашу ошибку и подделывает. Вы также можете попробовать цвет в этом веб-приложении. Приложение также отображает цвета, связанные с шестнадцатеричными кодами, если вы предшествуете шестнадцатеричному коду с помощью #.