在画布上的另一个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/

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