javascript - 如何让 Canvas 覆盖下面的其他 Canvas？

Question

我有两个重叠的画布。我在底部画布上画了一条线，并fillRect()在顶部画布上画了一条线，但即使我设置了 opacity=1，矩形看起来也是透明的。我该怎么做才能使矩形完全覆盖线条？

这是我的代码：

var line_canvas = document.getElementById("line_canvas");
var test_canvas = document.getElementById("test_canvas");

var line_drawmap = line_canvas.getContext("2d");
var test_drawmap = test_canvas.getContext("2d");

line_drawmap.strokeStyle = "#000";
line_drawmap.beginPath();
line_drawmap.moveTo(100, 0);
line_drawmap.lineTo(100, 400);
line_drawmap.stroke();
line_drawmap.beginPath();
line_drawmap.moveTo(250, 0);
line_drawmap.lineTo(250, 400);
line_drawmap.stroke();

test_drawmap.globalAlpha = 1;
test_drawmap.fillStyle = "rgba(100,30,100,1)";
test_drawmap.fillRect(50, 50, 260, 160);
test_drawmap.font = "30px Microsoft YaHei";
test_drawmap.textAlign = "center"
test_drawmap.fillStyle = "#00FFFF";
test_drawmap.fillText("test", 240, 130);
test_drawmap.stroke();

#background {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%
}

#test {
  position:relative;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
}
#line_canvas{
  margin: 0px;
  padding: 0px;
  position:absolute;
  left: 0px;
  top: 0px;
}
#test_canvas{
  margin: 0px;
  padding: 0px;
  position:absolute;
  left: 0px;
  top: 0px;
}

<div id="background">
  <div id="test">
    <canvas id="test_canvas" width="350" height="400" style="border:1px solid #d3d3d3;">err</canvas>
    <canvas id="line_canvas" width="350" height="400" style="border:1px solid #d3d3d3;">err</canvas>
  </div>
</div>

标签： javascripthtmlhtml5-canvas