如何將畫布放在圖像上？

這是我今天的問題，我試着畫出的東西上< 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

如何將畫布放在圖像上？

回答

相關問題