如何让上层Canvas完全覆盖下层Canvas？解决Canvas遮挡异常问题

这个问题的核心是两个Canvas的堆叠层级搞反了，并不是你的globalAlpha或者fillStyle设置有问题。我来给你详细拆解：

问题原因 #

你给两个Canvas都设置了position:absolute，在这种定位规则下，DOM中后出现的元素会默认堆叠在前面。看你的HTML结构：

<canvas id="test_canvas" ...></canvas> 
<canvas id="line_canvas" ...></canvas>

line_canvas写在test_canvas后面，所以它实际是在视觉上层的——你在test_canvas绘制的矩形，其实被line_canvas的线条挡住了，看起来就像是矩形呈现透明效果。

两种可行解决方案 #

方案1：调整HTML中Canvas的顺序 #

把line_canvas放到test_canvas前面，这样test_canvas会自然堆叠在上方：

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

方案2：用CSS的z-index强制设置层级 #

如果不想调整HTML结构，可以给test_canvas设置更高的z-index值，让它强制显示在line_canvas之上：

#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; 
    z-index: 10; /* 只要比line_canvas的默认z-index（0）高即可 */
} 

修正后的完整代码示例 #

<!DOCTYPE html>
<html>
<head>
  <style>
    #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; z-index:10; } 
  </style>
</head>
<body>
<div id="background"> 
  <div id="test"> 
    <canvas id="line_canvas" width="350" height="400" style="border:1px solid #d3d3d3;">err</canvas> 
    <canvas id="test_canvas" width="350" height="400" style="border:1px solid #d3d3d3;">err</canvas> 
  </div> 
</div>
<script>
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(); 
</script>
</body>
</html>

这样修改后，test_canvas的矩形就能完全覆盖line_canvas的线条了。

内容的提问来源于stack exchange，提问作者天使街区