createRadialGradient и прозрачность - PullRequest
Новая
       46

createRadialGradient и прозрачность

6 голосов
/ 03 апреля 2011

Я играю с createRadialGradient() на холсте HTML5. Это работает как шарм, за исключением случаев, когда я пытаюсь реализовать (полу) прозрачность.

Я сделал это jsFiddle, чтобы все было понятно: http://jsfiddle.net/rfLf6/1/.

function circle(x, y, r, c) {
    ctx.beginPath();
    var rad = ctx.createRadialGradient(x, y, 1, x, y, r);
    rad.addColorStop(0, c);
    rad.addColorStop(1, 'transparent');
    ctx.fillStyle = rad;
    ctx.arc(x, y, r, 0, Math.PI*2, false);
    ctx.fill();
}

ctx.fillRect(0, 0, 256, 256);

circle(128, 128, 200, 'red');
circle(64, 64, 30,    'green');

То, что происходит, - это круг (радиальный градиент), окрашенный в (x, y) с радиусом r, а цветовые остановки - r и 'transparent'. Однако зеленый круг меняется с зеленого на черный , в то время как он должен переходить в прозрачный, т. Е. Соответствующие красные цвета фонового круга.

Как реализовать прозрачные радиальные градиенты на холсте HTML5?

1 Ответ

11 голосов
/ 03 апреля 2011

Ну, так как вы спросили:

Я не знаю много об использовании <canvas> с JavaScript, но я знаю о CSS3-градиентах, и обычный способ работы с прозрачностью - это использование rgba цветов.

Чтобы градиент "исчезал" до прозрачного, вы можете добавить прозрачную версию того же цвета.

Вот что я сделал здесь: http://jsfiddle.net/thirtydot/BD3xA/

...