キャンバス内のある領域をクリックしたときに特定の機能を実行する方法

キャンバスの特定の領域でマウスをクリックしたときに特定の機能を実行できるようにしたいのですが、私はあなたが追加することができ、このような「172,58,269,166」キャンバス内のある領域をクリックしたときに特定の機能を実行する方法

<!DOCTYPE HTML> 
     <html> 
      <head> 
      <style> 
       canvas{ 
       margin-top: auto; 
       margin-left: auto; 
       margin-right: auto; 
       margin-bottom: auto; 
       /*display:block;*/ 


       } 

      </style> 
      </head> 
      <body background="MANCALA-start_bg_texture.jpg"> 
      <div class="container"> 
      <canvas id="myCanvas" width="1141" height="479" usemap="Canvas"></canvas> 
      <script> 
       function loadImages(sources, callback) { 
       var images = {}; 
       var loadedImages = 0; 
       var numImages = 0; 
       // get num of sources 
       for(var src in sources) { 
        numImages++; 
       } 
       for(var src in sources) { 
        images[src] = new Image(); 
        images[src].onload = function() { 
        if(++loadedImages >= numImages) { 
         callback(images); 
        } 
        }; 
        images[src].src = sources[src]; 
       } 
       } 
       var canvas = document.getElementById('myCanvas'); 
       var context = canvas.getContext('2d'); 
     // identifies what each of the pictures 
       var sources = { 
       background: 'MANCALA-game_bg_combined3.png', 
       pit1marble1: 'MANCALA-game_marble.png', 
       pit1marble2: 'MANCALA-game_marble.png', 
       pit1marble3: 'MANCALA-game_marble.png', 
       pit1marble4: 'MANCALA-game_marble.png', 
       pit1marble5: 'MANCALA-game_marble.png', 
       pit1marble6: 'MANCALA-game_marble.png', 
    }; 
      //loading the images on the canvas 
      loadImages(sources, function(images) { 
      context.drawImage(images.background, 0, 0, 1141, 479); 

      context.drawImage(images.pit1marble1, 200, 70, 50, 50); 
      context.drawImage(images.pit1marble2, 160, 85, 50, 50); 
      context.drawImage(images.pit1marble3, 175, 75, 50, 50); 
      context.drawImage(images.pit1marble4, 190, 80, 50, 50); 
      context.drawImage(images.pit1marble5, 200, 100, 50, 50); 
      context.drawImage(images.pit1marble6, 160, 100, 50, 50); 
    //mouse positioning 
     document.getElementById("myCanvas").onclick = function() {pasDiKlik()}; 


     function pasDiKlik() { 
      context.beginPath(); 
      context.arc(event.clientX-10, event.clientY-10,10, 0, 2 * Math.PI, false);

出典

2017-01-10 Unknwon

の座標としてキャンバスの右上に、矩形の領域内でクリックしたい場合、例えば（私はプログラミングに新しいです）キャンバスへのイベントリスナー、キャンバス上のマウスの位置を取得し、それに基づいてアクションを実行します。

var canvas = document.getElementById("MyCanvas") 
var canvasLeft = canvas.offsetLeft, 
var canvasTop = canvas.offsetTop 
canvas.addEventListener("click", function(event){ 
var x = event.pageX - canvasLeft 
var y = event.pageY - canvasTop; 
};

変数xとyはキャンバス上のピクセル位置になりました。

たとえば、最初のボックス（左上：200px、70px、右下：250px、120px）を確認します。

if (x >= 200 && x <= 250 && y >= 70 && y <= 120) { 
    //perform action here 
};

出典

2017-01-10 06:36:51

私はちょうどあなたに通知するために、自分の投稿を更新しました。 –

キャンバス内のある領域をクリックしたときに特定の機能を実行する方法

答えて

関連する問題