使用context.drawImage（）在非透明图像上绘制半透明图像？

Question

目前我有2个看起来像这样的瓷砖：

而且：

我想使用ctx.drawImage在完全不透明的黄色图像上绘制蓝色，半透明图像，结果如下所示：

然而，ctx.drawImage（）函数不是与底部图块混合，而是覆盖蓝色图块下方的像素。

我的代码如下所示：

var c = document.getElementById("game");
//Properties of the canvas.

var ctx = c.getContext("2d");

var readystate = 0;

var sand = new Image();
sand.src = "images/sand.png";
sand.onload = function () {
    console.log("Loaded!");
    readystate += 1;
};

var transparentwater = new Image();
transparentwater.src = "images/transparentwater.png";
transparentwater.onload = function () {
    console.log("Loaded!");
    readystate += 1;
};

function draw () {
    if (readystate >= 2) {
        ctx.drawimage(sand, 0, 0, 64, 32);
        ctx.drawimage(transparentwater, 0, 0, 64, 32);
    }
}


var testperframe = setInterval(draw, 10);

我可以设置它来做这个吗？我知道我可能只是使用图像编辑程序来覆盖它们然后绘制结果而不需要在运行时覆盖，但这将导致我需要绘制很多潜在的新图块。

Answer 1

修复它，原来我只是遇到砂纹理实际上不会绘制的问题。

完整的故事是我有一个看起来像的ctx.drawImage：

ctx.drawImage(tileset, mapdata[x][y][z][dx], mapdata[x][y][z][dy], 64, 32, 0, 0, 64, 32);

其中dx和dy是该图块上的图像位置。

发生的事情是dx和dy指向图像上的空白区域，因此实际上没有图像在蓝色图块下面绘制。

我现在已经修好了，现在图像正确叠加在一起。