Как запустить определенную функцию при нажатии на область в холсте

Я хочу, чтобы иметь возможность запускать определенную функцию, когда мышь нажимается на определенную область холста, но я не понимаю, как это сделать. (Я новичок в программировании), например, если я хотел щелкнуть в пределах области прямоугольника, в верхнем правом углу холста, такие как координаты «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

Вы можете добавить eventlistener к холсту, получить положение мыши на холсте и выполнить действие, основанное на этом. например:

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

Я только что обновил свой пост, чтобы уведомить вас. –

Как запустить определенную функцию при нажатии на область в холсте

ответ

Смежные вопросы