2012-05-26 1 views
1

문서로드, 캔버스와 mouseUp 또는 마우스를 이동하면, 보이지 않는 DIV 클릭 이미지 0이 캔버스는 이미지 하나를 그립니다 그릴 때 원하는 동작이, 그것은 이미지로 돌아갑니다 0변경 캔버스 이미지

내가 그 일을 가지고 있기 때문에 나는 CSS를 남겼다. 단지 내가 자바 스크립트 함수로 잘못하고있는 것을 알아야 할 필요가있다. 지금은 첫 번째 이미지조차도 아무 것도 표시하지 않습니다.

<!DOCTYPE HTML> 
<html> 
    <head> 
     <script type="text/javascript"> 
     function imgChange(imagePath) 
      var c=document.getElementById("myCanvas"); 
      var ctx=c.getContext("2d"); 
      var img=new Image(); 
      img.onload = function(){ 
      ctx.drawImage(img,0,0); 
      }; 
      img.src=imagePath; <!-- I THINK THIS IS WRONG? 
     </script> 
    </head> 

    <body> 

      <canvas id="myCanvas" width="506" height="319" 
onload="imgChange('0.gif')" style="border:1px solid #c3c3c3;"> 
      Your browser does not support the canvas element. 
      </canvas> 



      <div id="button1" onMouseDown="imgChange('1.gif')" onMouseUp="imgChange('0.gif')" onMouseOut="imgChange('0.gif')"></div> 
      <div id="key2"></div> 




    </body> 

</html> 

답변

2

코드가 결말 블록을 빠져

function imgChange(imagePath) { 
      var c=document.getElementById("myCanvas"); 
      var ctx=c.getContext("2d"); 
      var img=new Image(); 
      img.onload = function(){ 
        ctx.drawImage(img,0,0); 
      }; 
      img.src=imagePath; 
} 

마지막 '}'내가이 문제의 지난 12 반복에 대한 보이지 않는 DIV 클릭했습니다

+3

첫 번째 것도 누락되었습니다! ;) – Mohsen

0

JavaScript가 좋아 보인다. 하지만 을 클릭 할 수 없으므로을 보이지 않는 div에 클릭하십시오. div를 표시하고 시도하십시오.

동일한 origin policy too을 알고 있어야합니다. 이미지 경로는 도메인에 있어야합니다. localhost에서 실행중인 경우 로컬 HTTP 서버가 필요할 수 있습니다.

+0

없습니다. 그것의 보이지 않는 설정 ... 그냥 아무 내용이 없습니다. 어쨌든, div가 작동한다는 것을 믿으십시오. 자바 스크립트는 그렇지 않습니다. 이미지 파일은 html 문서 바로 옆에 있습니다 ... 원본 문제는 없습니다. 저는 CSS로 똑같은 일을 해왔습니다. 지금은 캔버스로하고 싶습니다. – 3z33etm

+0

어떤 종류의 서버를 사용하고 있습니까? – Mohsen

+1

구문 오류가 표시되는 경우 함수에 중괄호가 없습니다 – Mohsen