HTML Canvas: обновить свойство globalAlpha - PullRequest
Новая
       24

HTML Canvas: обновить свойство globalAlpha

2 голосов
/ 17 июня 2011

Я пытаюсь обновить globalAlpha элемента canvas после его рисования. Холст содержит изображение и два текста. Я показываю код внизу.

Я хочу изменить свойство globalAlpha с 0,6 до 1 впоследствии. Как я могу сделать это наиболее элегантно с учетом производительности? 

        var ctx = canvasElement.getContext("2d");
        ctx.globalAlpha = 0.6;

        //background gradient
        var gradient = ctx.createLinearGradient(0, 0, 0, options["height"]);
        gradient.addColorStop(0, options["colorStop0"]);
        gradient.addColorStop(1, options["colorStop1"]);
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, options["width"], options["height"]);

        //program
        ctx.font = options.programText["font"];
        ctx.fillStyle = options.programText["color"];
        ctx.fillText(prog.title, options.programText["x"], options.programText["y"]);

        //channel number
        ctx.font = options.channelNumber["font"];
        ctx.fillStyle = options.channelNumber["color"];
        ctx.fillText(item_index + 1, options.channelNumber["x"], options.channelNumber["y"]);

        //channel logo
        var channelLogo = new Image();
        channelLogo.onload = function () {
            var clX = options.channelLogo["x"];
            var clY = options.channelLogo["y"];
            ctx.drawImage(channelLogo, clX, clY, channelLogo.width, channelLogo.height);
        };
        channelLogo.src = this.getChannelLogo(channel);

Ответы [ 3 ]

3 голосов
/ 17 июня 2011

Вы не можете обновить глобальную альфа фигуры после того, как она нарисована.

Более того, вы не можете "обновить" что-нибудь после того, как она будет нарисована.В Canvas нет обновлений.Вместо этого вы должны перерисовать объект (ы) с измененными атрибутами.

Так что в вашем случае вы просто захотите очистить свой холст и перерисовать все, когда globalAlpha имеет значение 1.

1 голос
/ 17 февраля 2012

Вы можете обновить холст после рисования, просто выполнив манипуляции с пикселями.

Используя метод контекста холста getImageData & putImageData.

Но нет такого метода, как "changeAlpha (x,y, width, height, alphaValue) "контекста canvas.

С такой же проблемой я сталкиваюсь и в моем приложении.

0 голосов
/ 07 июля 2011

Если ваша альфа становится до 100% , вы, вероятно, можете просто перекрасить ее, не перерисовывая всю сцену (перезаписывая то, что было ранее). Единственный риск - это артефакты сглаживания, если вы делаете кривые.

Если ваша альфа понижается вниз , однако вы должны сделать, как говорит Саймон - перекрасить всю сцену.

...