如何在点击画布上的某个区域时运行某个功能

我希望能够在画布的某个区域单击鼠标时运行某个功能，但我不明白该怎么做。（我是新来的编程）例如，如果我想一个长方形的区域内单击，在画布上，右上方如“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

我刚刚更新了我的文章，只是为了通知你。 –

如何在点击画布上的某个区域时运行某个功能

回答

相关问题