如何将画布放在图像上？

这是我今天的问题，我试着画出的东西上< IMG>这是一个结构如何将画布放在图像上？

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

IMG在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，但是我想绘制的路径并不是很简单，并且在图像变得更大/更小时仍然可以调整大小，并且仍然很好看。感谢您的建议，希望大家都能理解我的英语。

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

来源

2012-12-17 kajojeq

设置图像作为背景图像上的'div'代替。或者直接在画布上绘制图像。 – powerbuoy

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-17 08:08:33 nytrm

nope，现在它看起来像： IMG CANVAS 画布是在img下。 – kajojeq

http://jsfiddle.net/nytrm/w3XXS/它在jsfiddle中为我工作，你可以分享一些代码，看看其他东西是否搞乱了它？ :) – nytrm

是的队友，我有一个小错误。现在工作很好，非常感谢你。 – kajojeq

只需绘制图像在画布上：

<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-17 08:08:09

这并不回答这个问题。 –

请发布一些代码示例 – MikroDel

将您在HTML的IMG之前帆布：

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

来源

2012-12-17 08:11:53

，导致我看到我的路径，但没有看到图像。 – kajojeq

如何将画布放在图像上？

回答

相关问题