Question

我试图在绘制后更新canvas元素的globalAlpha。画布包含图像和两个文本。我在底部显示代码。

之后我想将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);

Answer 1

在绘制形状后，无法更新形状的globalAlpha。

更重要的是，在绘制之后，您无法“更新”任何。 Canvas中没有更新。您必须使用更改的属性重绘事物。

因此，在您的情况下，您只需要清除画布并使用globalAlpha重新设置为1重新绘制所有内容。

Answer 2

您只需进行像素操作即可在绘画后更新画布。

使用getImageData＆amp; canvas的上下文的putImageData方法。

但是没有像canvas的上下文的“changeAlpha（x，y，width，height，alphaValue）”这样的方法。

我在我的应用程序中也遇到了同样的问题。

Answer 3

如果您的Alpha正在 高达100％ ，您可能只需重新绘制它而不重绘整个场景（覆盖之前的内容）。如果你正在做曲线，唯一的风险就是一些抗锯齿效果。

但是，如果您的alpha要 down ，那么您必须像Simon所说的那样 - 重新绘制整个场景。

HTML Canvas：更新globalAlpha属性

3 个答案: