Question

我试图在tiff图像上叠加画布。我必须重叠画布和img，因为tiff文件不能在canvas元素上设置为背景。

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

我尝试解决方案时创建了a jsfiddle。然而，无论我如何改变img和画布的位置，它们似乎都不会重叠;相反，它们并排显示或相互上下方显示。

<!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>

Answer 1

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

重要的是在画布上设置position: absolute，以便将其置于其他内容之上，然后使用top:0;left:0将其放置在容器的顶部。

在makeSquare()中，您还需要更新画布＆＃39;如果您想在整个图片中绘制内容，请width和height。

Answer 2

在你的jsfiddle（css部分）你使用.img类，如果删除那个类点，你将指向img标签，你的画布将在该图像的顶部。那是你在找什么？对不起，如果我误解了。

覆盖在tiff img上面的画布

2 个答案: