Question

我遇到与此处所述的图层类似的问题html5 - canvas element - Multiple layers

但是，接受的答案对我不起作用，因为layer1我已经渲染了图像（drawImage）

第二层 - 第2层（渐变）总是第1层。

示例代码：

    canvas = document.getElementById("layer1");
    ctx = canvas.getContext("2d");

    var img = new Image();
    img.src = "/img/img.png";
    img.onload = function() {
      ctx.drawImage(img, 0, 0);
    };

    canvas2 = document.getElementById("layer2");
    ctx2 = canvas.getContext("2d");

    var my_gradient = ctx2.createLinearGradient(0, 0, 0, 400);
    my_gradient.addColorStop(0, "black");
    my_gradient.addColorStop(1, "white");
    ctx2.fillStyle = my_gradient;
    ctx2.fillRect(0, 0, 500, 555);

HTML：

    <canvas id="layer1" width="1000" height="1000" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
    <canvas id="layer2" width="1000" height="1000" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>

Answer 1

您正在将ctx2设置为layer1的上下文：

ctx2 = canvas.getContext("2d");

当然，由于图像异步加载，onload事件在您绘制渐变后会触发，并在同一画布上绘制。

HTML5 Canvas图层问题

1 个答案: