Question

我正在尝试使用putImageData（）将一系列图像放在画布上，但上下文的globalAlpha属性似乎没有效果。但是，它正在使用drawImage（）。它是如何工作的？

该代码段不起作用：

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

Answer 1

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

来自规范：

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

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

Canvas globalAlpha不影响图像？

2 个答案: