在 tiff img 上覆盖 Canvas答案

【问题标题】：Overlaying Canvas on top of tiff img在 tiff img 上覆盖 Canvas
【发布时间】：2016-02-17 06:34:58
【问题描述】：

我正在尝试在 tiff 图像上覆盖画布。我必须将画布和 img 重叠，因为 tiff 文件不能设置为画布元素的背景。

我已阅读建议的解决方案 here，但建议的使用 z-index 的解决方案对我不起作用。也许我错过了一些东西，因为解决方案链接中的演示被破坏了。

我在尝试解决方案时创建了a jsfiddle。但是，无论我如何改变 img 和 canvas 的位置，它们似乎都不会重叠；而是并排或上下显示。

<!DOCTYPE html>
<html>
<style>
.img{position:absolute;z-index:1;}

  #canvas{
     position:relative;
     z-index:20;
  }
  #container{
    display:inline-block;
    margin: 0 auto; 
    background: black; 
    position:relative; 
    border:5px solid black; 
    border-radius: 10px; 
    box-shadow: 0 5px 50px #333}

</style>
<body>

<div id="container" style="height: 100%; overflow:scroll;">
<img id="center_img" onload="makeSquare()" src="http://www.vtk.org/Wiki/images/0/03/VTK_Examples_Baseline_IO_TestReadTIFF.png" />
<canvas id="canvas"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
</div>

<script>
function makeSquare(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
}
</script>

</body>
</html>

【问题讨论】：

标签： javascript html css canvas

【解决方案1】：

更新小提琴：https://jsfiddle.net/505ohh63/3/

重要的部分是在画布上设置position: absolute，这样它就可以放在其他东西的顶部，然后用top:0;left:0将它定位在容器的顶部。

在makeSquare() 中，如果要在整个图像上绘制内容，还需要更新画布的width 和height。

【讨论】：

【解决方案2】：

在您的 jsfiddle(css 部分) 中，您使用 .img 类，如果您删除该类点，您将指向 img 标签，您的画布将位于该图像之上。那是你要找的吗？对不起，如果我误解了。

【讨论】：