Question

我有一个画布，我在上面绘制了一些图像，但是如何将画布分组到不同的组中，我可以单击并运行一个函数（类似于区域标记）（我是新的编程）。使用区域标记，您只能将其用于图像，但如何将区域标记与画布本身连接。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="1024" 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');

      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',

      };

      loadImages(sources, function(images) {
        context.drawImage(images.background, 0, 0, 1024, 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);



      });

    </script>
<map name="Canvas">

 <area shape="rect" coords="172,50,269,176" href="sun.htm" alt="Sun" id=pit1>
 <area shape="rect" coords="286,50,383,176" href="sun.htm" alt="Sun" id=pit2>
 <area shape="rect" coords="400,50,497,176" href="sun.htm" alt="Sun" id=pit3>
 <area shape="rect" coords="528,50,625,176" href="sun.htm" alt="Sun" id=pit4>
 <area shape="rect" coords="651,50,748,176" href="sun.htm" alt="Sun" id=pit5>
 <area shape="rect" coords="757,50,864,176" href="sun.htm" alt="Sun" id=pit6>

 <area shape="rect" coords="172,58,269,166" href="sun.htm" alt="Sun">
 <area shape="rect" coords="286,58,383,166" href="sun.htm" alt="Sun">
 <area shape="rect" coords="400,58,497,166" href="sun.htm" alt="Sun">
 <area shape="rect" coords="528,58,625,166" href="sun.htm" alt="Sun">
 <area shape="rect" coords="651,58,748,166" href="sun.htm" alt="Sun">
 <area shape="rect" coords="757,58,864,166" href="sun.htm" alt="Sun">
</map>
  </body>
</html>

Answer 1

在这里办理入住手续：

Javascript check Mouse clicked inside the Circle or Polygon

meouw 回答肯定我已经测试过并保证它有效。似乎还有一些其他解决方案，也被赞成，也许你可以尝试一下，

pnpoly( 4, [10, 20, 10, 20], [30, 30, 40, 40], 5, 25 )

所以这就是方形，你有4个顶点，这是第一个参数。然后我给出x坐标[10, 20, 10, 20]和y [30, 30, 40, 40]并检查点击的地点(5px, 25px)是否在广场内。

因此，您可以修改具有任意顶点的任何形状。

如何在画布中添加可点击区域

1 个答案: