Как определить, что для fillStyle был назначен недопустимый цвет?

1

Предположим, что кто-то пытается присвоить следующее

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

Может ли это быть обнаружено? g.fillStyle становится некоторым дозорным значением?

Представьте, что вы пишете веб-приложение, которое запрашивает у пользователя именованный цвет, а затем отображает цвет. Как мы можем сказать пользователю, что он сделал boo-boo?

Теги:
canvas
colors

3 ответа

1
Лучший ответ

Согласно спецификации 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.

Я рекомендую одно из первых двух решений.

  • 0
    Как и я, вам нужно проверить, не новый ли цвет совпадает со старым ...
  • 0
    @Akxe Да, это первый пункт в моем списке возможных решений. Недостаток: он не позволяет различать цвета, которые являются недопустимыми или просто идентичны ранее установленному цвету без дополнительной логики
0

Неверная строка цвета будет интерпретирована как последний действительный цвет (или #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
}

Предупреждение: Протестировано только на хром!

0

Эксперимент показывает это. Если вы назначаете нелегальный цвет, присваивание просто терпит неудачу. Состояние графического контекста не изменилось. JavaScript, как кажется типичным для его манеры, просто игнорирует вашу ошибку и подделывает. Вы также можете попробовать цвет в этом веб-приложении. Приложение также отображает цвета, связанные с шестнадцатеричными кодами, если вы предшествуете шестнадцатеричному коду с помощью #.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню