画布内的图像:区分onclick内部图像和外部图像(但在画布内)

时间:2017-03-28 14:03:38

标签: javascript css html5 canvas onclick

编辑问题和代码:如果我现在在函数move_background()中使用return语句并按照建议将图像保存在var imageObj中,我的代码仍然无效并且在图像内外都播放声音2(声音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>

1 个答案:

答案 0 :(得分:0)

要小心谨慎,每次单击画布时,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>