HTML Canvas：更新 globalAlpha 属性

Question

我正在尝试在绘制后更新画布元素的 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 &画布上下文的 putImageData 方法。

但是画布上下文中没有像“changeAlpha(x,y,width,height,alphaValue)”这样的方法。

我在我的应用程序中也面临同样的问题。

Answer 3

如果您的 Alpha 达到 100%，您可能只需重新绘制它，而无需重新绘制整个场景（覆盖之前的场景）。唯一的风险是如果您正在制作曲线，则会出现一些抗锯齿伪影。

然而，如果你的阿尔法下降，你必须按照西蒙所说的那样 - 重新绘制整个场景。