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 动画。但我找到了解决办法。如果您使用以下代码创建全屏 canvas 来缩放它：

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();

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

希望 reader 消息灵通 :-)。

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

HTML5 Canvas context globalAlpha not working on image [iOS]

javascript

canvas

ios

html5-canvas