画布内的图像：区分onclick内图和外图（但在画布内）

Question

编辑的问题和代码：如果我现在在函数 move_background() 中使用 return 语句并按照建议将图像保存在 var imageObj 中，我的代码仍然无法正常工作，并且在图像内部和外部都播放 sound2（声音 3 是虽然在画布外时正确播放），有什么想法吗？

</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>

原始问题和代码：我有一个矩形画布和一个图像在它的中心。当单击在画布内部（但在图像外部）以及单击在图像内部时，我想播放不同的音频文件。 这就是我现在所拥有的

<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

首先要注意的是，每次单击画布时，myFunct 调用都会将多个单击事件绑定到您的文档。我已经编辑了小提琴以实现您正在寻找的东西。如果有帮助，请告诉我。

<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>