HTML5 Canvas上下文globalAlpha无法处理图像[iOS]

Question

我正在更新“this.opacity”值以淡化svg徽标。 除了iOS（8）之外，代码正在工作。

    var size = (this.canvas.width * 0.2) * 0.4;

    this.context.save();
    this.context.globalAlpha = this.opacity;
    this.context.drawImage(this.svg, this.canvas.width * 0.04, this.canvas.width * 0.027, size, size);
    this.context.restore();

Answer 1

iOS 不支持动画化SVG图像的alpha。 但我找到了解决方案。 如果使用以下代码创建全屏画布以缩放它：

var ratio = window.devicePixelRatio || 1,
    width = $(window).width(),
    height = $(window).height();

this.canvas.width = width * ratio;
this.canvas.height = height * ratio;
this.canvas.style.width = width + "px";
this.canvas.style.height = height + "px";

this.update();

您将能够使用双倍大小的图像来提供视网膜支持，这样您就不必在画布中使用SVG元素（这对您的记忆来说也很糟糕）。 好消息是图像将接受设置上下文的globalAlpha。

希望读者充分了解情况:-)。