画布 globalAlpha 不影响图像？答案

【问题标题】：Canvas globalAlpha doesn't affect images?画布 globalAlpha 不影响图像？
【发布时间】：2012-01-22 12:23:48
【问题描述】：

我正在尝试使用 putImageData() 在画布上放置一系列图像，但上下文的 globalAlpha 属性似乎没有效果。但是，它与 drawImage() 一起工作。它应该是这样工作的吗？

那个 sn-p 不起作用：

cx.globalAlpha = 0.1;
cx.putImageData(imagesData[index], 0, 0);

【问题讨论】：

标签： image canvas draw alpha

【解决方案1】：

不，putImageData 放置来自 imageData 的纯净原始像素，覆盖那里的任何像素。

来自规范：

当前路径、变换矩阵、阴影属性、全局 alpha、剪切区域和全局合成运算符不得影响 getImageData() 和 putImageData() 方法。

【讨论】：

【解决方案2】：

您可以将图像制作成图案，绘制路径并填充它。

var img=document.getElementById("myImg")
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var pat=ctx.createPattern(img,'repeat');

ctx.globalAlpha=0.2;

ctx.fillStyle=pat;
ctx.beginPath(); ctx.rect(0,0,175,150); ctx.fill(); ctx.closePath();

ctx.globalAlpha=0.9;

ctx.beginPath(); ctx.rect(50,50,75,50); ctx.fill(); ctx.closePath();

【讨论】：