HTML5 Canvas 图层问题

Question

我有类似的层问题html5 - canvas element - Multiple layers

但是，接受的答案对我不起作用，至于 layer1 我已经渲染了图像 (drawImage)

第二层 - layer2（渐变）总是在 layer1。

示例代码：

    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 事件会在您绘制渐变之后触发，并且它会被绘制在同一个画布上。