So fügen Sie einen anklickbaren Bereich in einer Zeichenfläche hinzu

Ich habe eine Zeichenfläche und habe einige Bilder darauf gezeichnet, aber wie gruppiere ich die Zeichenfläche in verschiedene Gruppen, auf die ich klicken und eine Funktion ausführen könnte (ähnlich wie Bereichs-Tags) (Ich bin neu in der Programmierung). Mit dem Bereichs-Tag können Sie es nur für Bilder verwenden, aber wie verbinden Sie das Bereichs-Tag mit der Leinwand selbst.So fügen Sie einen anklickbaren Bereich in einer Zeichenfläche hinzu

<!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>

Quelle

2016-11-13 Unknwon

Anreise hier:

Javascript check Mouse clicked inside the Circle or Polygon

meouw Antwort arbeitet für sicher, ich habe es Test und garantieren es funktioniert. Es scheint, dass es einige andere Lösungen, auch die upvoted wurden, vielleicht können Sie sie versuchen, entweder

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

So dies der Fall mit Platz ist Sie haben 4 Eckpunkte wich ist die erstes Argument. Dann gebe ich die x Koordinaten [10, 20, 10, 20] und die y [30, 30, 40, 40] und überprüfen Sie, ob der angeklickte Punkt (5px, 25px) innerhalb des Quadrats ist.

So können Sie das für jede Form mit so vielen Vertices ändern.

Quelle

2016-11-13 13:47:51

es tut mir leid, ich verstehe nicht wirklich den Code würde es Ihnen etwas ausmachen, es zu erklären? Sorry – Unknwon

@Unknwon sicher sehen Sie die Ausgabe –

So fügen Sie einen anklickbaren Bereich in einer Zeichenfläche hinzu

Antwort

Verwandte Themen