Question

今天是我的问题，我尝试在＆lt; img ＆gt;上绘制一些内容。这是一个结构

<div id='...' style='position:relative;'>
  <img id='...' style='posistion:absolute;' />
  <canvas id ='...' style='position:absolute;' />
</div>

img in css已经

了

-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
user-select: none;

如何在图像上绘制画布？现在它落后了。我不能在画布上使用z-index。我试过制作其他div。它必须是一个img。我应该使用其他东西而不是画布吗？我可以使用其他div，但我想绘制的路径并不是很简单，并且当图像更大/更小并且看起来仍然很好时必须可调整大小。感谢您的建议，希望每个人都理解我的英语。

让我更清楚我想要的是当画布落后时的代码。当我不添加画布时，图像就消失了。我想设置一条路径向用户显示已经删除但有时在这个屏幕上有很多其他div，所以我想把画布放在img所在的IMG或DIV上。它必须在前面，因为当img很大我们不会看到路径下。这是一个链接 https://dl.dropbox.com/u/6421191/canvasbehind.jpg

Answer 1

只需将图像绘制到画布上：

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

Answer 2

HTML

<div id='mydiv' >
  <img id='myimage' src="http://placekitten.com/200/385" />
  <canvas id ='mycanvas'  width="200" height="100" />
</div>

CSS

div#mydiv{
    position: relative;
}
#myimage{
     position: relative;
}
#mycanvas{
    position: absolute;
    top: 0;
    left: 0;
    background-color: #333;
}

我认为这就是你要做的事。

在背景上有一个图像并在图像顶部显示画布区域？

我希望我的小样本代码可以帮助你。

Answer 3

将画布放在html中的img之前：

<div id='...' style='position:relative;'>
<canvas id ='...' style='position:absolute;' />
<img id='...' style='posistion:absolute;' />
</div>

如何在图像上放置画布？

3 个答案: