Можно ли задать заливку альфа-прозрачности или стиль обводки отдельно от RGB в Canvas HTML5? - PullRequest
Новая
       21

Можно ли задать заливку альфа-прозрачности или стиль обводки отдельно от RGB в Canvas HTML5?

5 голосов
/ 04 июня 2011

В Canvas / HTML5 я знаю, что вы можете использовать RGBA для установки цвета и альфа-прозрачности для fillStyle или strokeStyle.Вы также можете использовать только RGB для установки цвета без альфа-канала.Есть ли способ, которым вы можете изменить альфа-значение элемента без указания цвета.

В моем примере было бы желание изменить fillStyle или strokeStyle над секцией canvas, цвет которой был случайным или больше не известен.Есть ли способ изменить альфа через другой атрибут или ничего не передавая цвету (например, ctx.fillStyle = 'rgba (,,, alphaValue)';)

Ответы [ 2 ]

3 голосов
/ 21 марта 2013

Вы можете использовать функцию для извлечения значений RGB из того, что установлено для интересующего вас стиля, а затем установить его с нужным значением альфа: 

var rgb = hexToRgb(canvasCtx.fillStyle);
canvasCtx.fillStyle = "rgba(" + rgb["r"] + "," +rgb["g"] + "," + rgb["b"] + ",0.2)";

Вы можете использовать функцию hexToRgb, напримерэтот, взятый из этого другого ответа : 

function hexToRgb(hex) {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
        return r + r + g + g + b + b;
    });

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}
3 голосов
/ 04 июня 2011

Есть несколько способов.

Сначала атрибут globalAlpha контекста.

Как вы и просите в заголовке, это позволит устанавливать прозрачность независимо от заливки или обводки.

Затем вы можете использовать getImageData в точке, чтобы узнать цвет и сохранить эту информацию, очистить эту область с помощью clearRect, установить globalAlpha, а затем перерисовать эту область в соответствии с сохраненным вами цветом. *

Конечно, вам вообще не нужен globalAlpha. Вы также можете сделать это выше, и вместо того, чтобы устанавливать глобальную альфа, просто измените альфа цвета, который вы сохранили.

Если вы хотите сделать большую, сложную область холста более прозрачной, вам нужно изменить глобальную альфу, а затем нарисовать холст на себе , используя drawImage.

Вот пример этого. Я рисую два прямоугольника, затем делаю прямоугольную область между ними более прозрачной.

...