Question

我正在尝试在ImageData中覆盖多个Canvas实例，并且透明区域不影响它们层叠在其上的现有像素。

这个想法是在画布上绘制一些东西，调用getImageData()，存储结果，然后调用clearRect()并重复该过程。

据我所知，我应该能够使用putImageData()并以任何顺序将存储的ImageData实例拉回彼此的顶部，并且透明像素不会影响它们下面的像素。

这与我的预期不符。我做了an example on JSBin

let stage = document.getElementById('stage');
let ctx = stage.getContext('2d');

ctx.fillStyle = '#ff0000';
ctx.fillRect(0,0, 150, 150);
let d1 = ctx.getImageData(0,0, 500, 500);
ctx.clearRect(0,0,500,500);

ctx.fillStyle = '#00ff00';
ctx.fillRect(0,0, 130, 130);
let d2 = ctx.getImageData(0,0, 500, 500);
ctx.clearRect(0,0,500,500);

ctx.putImageData(d1, 200, 0);
ctx.putImageData(d2, 0, 80);

我先绘制并保存红色，然后保存绿色。然后，我使用putImageData()向后绘制红色形状。我期望当我再绘制绿色形状时，红色的形状将保持完整，但会被绿色数据的透明部分剪短。有人可以解释为什么会发生这种削波吗？如果我有办法使用putImageData()可以有效地忽略透明像素吗？

希望这是有道理的。我很累：）

将多个ImageData对象与透明度组合

0 个答案: