0

这是我今天的问题，我尝试在 < 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;

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

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

4

3 回答 3

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>
于 2012-12-17T08:08:09.060 回答
0

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

我认为这就是你正在尝试做的。

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

我希望我的小示例代码对您有所帮助。

于 2012-12-17T08:08:33.053 回答
0

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

<div id='...' style='position:relative;'>
<canvas id ='...' style='position:absolute;' />
<img id='...' style='posistion:absolute;' />
</div>
于 2012-12-17T08:11:53.303 回答