这是我今天的问题，我尝试在 <img> 上画一些东西，这是一个结构
<div id='...' style='position:relative;'>
<img id='...' style='posistion:absolute;' />
<canvas id ='...' style='position:absolute;' />
</div>
css中的img已经
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
user-select: none;
如何在图像上绘制 Canvas ？现在它落后了。我不能在 Canvas 上使用 z-index。我尝试制作其他 div。它必须是一个 img。我应该用别的东西代替 Canvas 吗？我可以使用其他 div，但我想绘制的路径并不是很简单，并且当图像变大/变小但看起来仍然不错时必须调整大小。 感谢您的建议，希望每个人都能理解我的英语。
为了更清楚地说明我想要的是 Canvas 落后时的代码。当我不添加 Canvas 时，图像就消失了。我想放置一条路径向用户显示这已被删除但有时在此屏幕上有许多其他 div 所以我想将 Canvas 放在 IMG 或 img 所在的 DIV 上。它必须在前面，因为当img 很大我们不会看到下面的路径。这是一个链接 https://dl.dropbox.com/u/6421191/canvasbehind.jpg
最佳答案
只需将图像绘制到 Canvas 上即可:
<html>
<canvas id ='your_canvas' width="1000" height="1000"/>
</html>
<script>
window.onload=function(){
var canvas = document.getElementById('your_canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = (your image source);
ctx.drawImage(img, x_pos,y_pos,width,height);
}
</script>
关于html - 如何在图像上放置 Canvas ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13910321/