캔버스를 이미지에 올리는 방법은 무엇입니까?

가 여기에 오늘 내 문제가, 내가 < IMG에 무언가를 그리는 시도>이 CSS에서캔버스를 이미지에 올리는 방법은 무엇입니까?

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

IMG 이미 내가 캔버스를 그릴 수있는 방법

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

이있는 구조를이다 이미지로? 지금은 뒤떨어져 있습니다. 캔버스에 z- 인덱스를 사용할 수 없습니다. 다른 div를 만들려고했습니다. img이어야합니다. 캔버스 대신 다른 것을 사용해야합니까? 나는 다른 div를 사용할 수는 있지만 그려야 할 경로는 정말 간단하지 않고 크기가 더 크거나 작을 때 크기를 조정할 수 있어야하며 여전히 멋지게 보입니다. 조언을 주셔서 감사합니다. 모두가 제 영어를 이해하기를 바랍니다.

내가 원하는 것은 캔버스가 뒤에있을 때의 코드입니다. 캔버스를 추가하지 않을 때는 이미지가 사라집니다. 이 사용자가 이미 삭제되었음을 보여줄 수있는 경로를 지정하고 싶지만 img가있는 IMG 또는 DIV에 캔버스를 넣으려는 경우이 화면에 다른 여러 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; 
}

나는 이것이 당신이 할 일을 시도하고있는 무슨 생각 .

배경 위에 하나의 이미지를두고 이미지 위에 캔버스 영역을 표시 하시겠습니까?

약간의 샘플 코드가 도움이되기를 바랍니다. 당신의 HTML에있는 IMG 전에

출처

2012-12-17 08:08:33 nytrm

을 게시하시기 바랍니다. 지금은 다음과 같습니다. IMG CANVAS canvas is 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

장소 캔버스 :

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

출처

2012-12-17 08:11:53

내 경로가 보이지만 이미지가 표시되지 않습니다. – kajojeq

캔버스를 이미지에 올리는 방법은 무엇입니까?

답변

관련 문제