HTML Canvas：更新 globalAlpha 属性答案

【问题标题】：HTML Canvas: update globalAlpha propertyHTML Canvas：更新 globalAlpha 属性
【发布时间】：2011-09-17 08:41:24
【问题描述】：

我正在尝试在绘制后更新画布元素的 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);

【问题讨论】：

标签： html canvas opacity

【解决方案1】：

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

更重要的是，您无法在绘制后“更新”任何东西。 Canvas 中没有更新。相反，您必须重新绘制属性已更改的事物。

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

【讨论】：

【解决方案2】：

您可以在绘画后通过像素操作来更新画布。

使用canvas上下文的getImageData & putImageData方法。

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

我的应用也面临同样的问题。

【讨论】：

【解决方案3】：

如果您的 alpha达到 100%，您可能只需重绘它而不重绘整个场景（覆盖之前的内容）。如果你在做曲线，唯一的风险是一些抗锯齿伪影。

但是，如果您的 Alpha 版正在下降，您必须按照 Simon 所说的去做 - 重新绘制整个场景。

【讨论】：

那么当我以 100% 的 alpha 重新绘制画布时，代码会是什么样子？ ImageData 循环？
您需要重新绘制背景渐变、节目、频道编号、频道徽标等。将其移至单独的函数中，并使用两个不同的 globalAlpha 调用两次。这几乎是在重新绘制整个场景 - 但如果你在画布上有其他东西，它们就不必重新绘制。
但是不会例如将新背景粘贴在旧背景上吗？旧的背景不会被清除，不是吗？
它只是被粘贴，是的。