Draw Punkt auf das Bild mit jQuery

Question

Ich habe den folgenden Code zu verfolgen, wo ein Benutzer auf ein Bild klickt:

<img src="images/test.jpg" id="testimg" /> 

    <script type="text/javascript"> 
     $("#testimg").click(function (ev) { 
      mouseX = ev.pageX; 
      mouseY = ev.pageY 
      alert(mouseX + ' ' + mouseY); 
     }) 

    </script> 

Was ich tun möchte, wenn der Benutzer klickt auf das Bild, ich möchte Zeichnen Sie einen Punkt an den X, Y-Koordinaten des Klicks.

Kann mir jemand einen Rat geben, wie das gemacht werden kann?

Answer 1

<script type="text/javascript"> 
     $("#testimg").click(function (ev) { 
     mouseX = ev.pageX; 
     mouseY = ev.pageY 
     //alert(mouseX + ' ' + mouseY); 
     var color = '#000000'; 
     var size = '1px'; 
     $("body").append(
      $('<div></div>') 
       .css('position', 'absolute') 
       .css('top', mouseY + 'px') 
       .css('left', mouseX + 'px') 
       .css('width', size) 
       .css('height', size) 
       .css('background-color', color) 
     ); 
    }) 
</script> 

Dies zeichnet ein schwarzes 1x1 Pixel div nicht scrollbaren ist.

Answer 2

Methode 1.

Sie müssen Verwendung der Leinwand-Tag machen wil. https://developer.mozilla.org/en/Canvas_tutorial

Methode 2.

<div style="width:1px; height : 1px; position: fixed; top: mouseY; left:mouseX></div> 

Funktioniert nur, wenn die Seite