Question

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

Answer 1

您可以向画布添加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
};

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

1 个答案: