캔버스 안의 이미지 : 이미지 및 외부 이미지 (캔버스 내부)에서 onclick을

Question

수정 된 질문 및 코드 : move_background() 함수에서 return 문을 사용하고 제안 된대로 var imageObj 내에 이미지를 저장하면 내 코드는 다음과 같습니다. 여전히 작동하지 않고 사운드 2를 재생합니다. 외부 및 외부 이미지 (사운드 캔버스가 외부 캔버스에서 올바르게 재생되는 경우), 어떤 아이디어가 필요한가요?

</script> 

<canvas id="myCanvas" width="400" height="400" style="border:1px solid white;" onclick="myFunct()"></canvas> 

<!-- audio source is specified later--> 
<audio id="audio"></audio> 

<style> 
    #myCanvas { position: absolute; 
    top:0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin:auto; } 
</style> 

<script> 

    var canvas=document.getElementById("myCanvas");  
    context = canvas.getContext('2d'); 
    var imageObj = make_background(); 

    function make_background() 
    { 

     img = new Image();; 
     img.src="img.gif"; 
     img.id = "myImage"; 
     img.onload = function(){ 
     context.drawImage(img, (canvas.width-img.width)/2, (canvas.height-img.height)/2); 
     } 
     return img 
    } 

     function play(){ 
     var audio = document.getElementById("audio"); 
     audio.play(); 
     } 

     function myFunct() { 
      var audio = document.getElementById("audio"); 
      // PLAY DIFFERENT SOUND IF ANSWER IS RIGHT OR WRONG 
      document.addEventListener("click", function(e){ 
      if(e.target == imageObj){ // inside canvas and inside image 
       audio.src = "sound1.mp3"; 
       audio.play(); 
      } 
      else if (e.target === canvas && e.target !== imageObj) { // inside canvas but outside image 
       audio.src = "sound2.mp3"; 
       audio.play(); 
      } 
      else{ 
       audio.src = "sound3.mp3"; 
       audio.play(); 
      } 
      // GENERATE RANDOM LOCATION 
      var x = Math.floor(Math.random()*300); 
      var y = Math.floor(Math.random()*300); 
      var obj = document.getElementById("myCanvas"); 
      obj.style.top = x + "px"; 
      obj.style.left = y + "px"; 
      obj.style.bottom = x - "px"; 
      obj.style.right = y - "px"; 
      },false);   
     } 
    </script> 

원본 질문과 코드 : 나는 가운데에 캔버스와 이미지가 있습니다. 클릭이 캔버스 안에 있지만 (이미지 외부) 클릭이 이미지 내부에있을 때 다른 오디오 파일을 재생하고 싶습니다. 이것은 내가 캔버스를 클릭하여 문서에 때마다 다수의 클릭 이벤트를 바인딩주의 myFunct 호출의 단어를 시작하려면 지금

<canvas id="myCanvas" width="400" height="400" style="border:1px solid white;" onclick="myFunct()"></canvas> 
<!-- audio source is specified later--> 
<audio id="audio"></audio> 
<script> 
     var canvas=document.getElementById("myCanvas"); 
     context = canvas.getContext('2d'); 
     make_background(); 

     function make_background() 
     { 
      img = new Image(); 
      img.src = 'img.gif'; 
      img.onload = function(){ 
      context.drawImage(img, 100, 100); 
     } 
    } 

    function play(){ 
     var audio = document.getElementById("audio"); 
     audio.play(); 
    } 

    function myFunct() { 
     var audio = document.getElementById("audio"); 
     var canv = document.getElementById("myCanvas"); 
     document.addEventListener("click", function(e){ 
      if(inside canvas and inside img){ 
      audio.src = "sound1.mp3"; 
      audio.play(); 
      } 
      else if (inside canvas and outside img) { 
       audio.src = "sound2.mp3"; 
       audio.play(); 
      } 
      else{ 
      audio.src = "sound3.mp3"; 
      audio.play(); 
      } 
     },false);   
    } 
</script> 

Answer 1

위해 가지고 것입니다. 나는 당신이 찾고있는 것을 얻기 위해 바이올린을 편집했다. 그게 도움이되는지 알려주세요.

<canvas id="myCanvas" width="400" height="400" style="border:1px solid white;" onclick="myFunct(event)"></canvas> 
<!-- audio source is specified later--> 
<audio id="audio"></audio> 
<script> 
    var canvas=document.getElementById("myCanvas"); 
     context = canvas.getContext('2d'); 
     var imageObj = make_background(); 
     function make_background() 
     { 
      img = new Image(); 
      img.src = 'http://placehold.it/100x100'; 
      img.onload = function(){ 
      context.drawImage(img, 100, 100); 
     } 
     return img; 
    } 

    function play(){ 
     var audio = document.getElementById("audio"); 
     audio.play(); 
    } 

    function myFunct(e) { 
     var audio = document.getElementById("audio"); 
     var canv = document.getElementById("myCanvas"); 
      if(e.clientX > 100 && e.clientX < 100 + imageObj.width && e.clientY > 100 && e.clientY < 100 + imageObj.height){ 
      console.log('inside image and canvas'); 
      //audio.src = "sound1.mp3"; 
      //audio.play(); 
      } 
      else if (e.clientX > 400 || e.clientY > 400) { 
      // outside canvas 
       console.log('outside canvas'); 
       //audio.src = "sound2.mp3"; 
       //audio.play(); 
      } 
      else{ 
      console.log('inside canvas but outside image'); 
      //audio.src = "sound3.mp3"; 
      //audio.play(); 
      }  
    } 
</script>