javascript - 在画布中的另一个 png 上绘制一个 png

Question

我在 JS/Canvas 中制作一个 rpg 地图创建者是为了好玩，但我有一个问题。我可以在画布上绘制图像，但无法在画布上已经绘制的另一个图像上绘制具有透明度的图像。

我希望蘑菇在草地上，而不是抹去它。网格只是一个帮手，我只有 1 个画布，我使用putImageData.

http://img11.hostingpics.net/thumbs/mini_31288520120419113247.png（我们可以看到蘑菇图片有透明度）

http://img11.hostingpics.net/thumbs/mini_71357220120419113257.png（似乎在这里不起作用）

我有你的想法，欢迎他们。

Answer 1

不要使用 putImageData 因为它会替换像素，使用

context.drawImage(document.getElementById('mushroomImg'),0,0 );
//syntax : drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

JSFiddle 有两个图像：http: //jsfiddle.net/GVPfj/3/

（遗憾的是，我找不到透明的蘑菇，所以它是一座房子 :-)）