Disegnare dot sull'immagine utilizzando jQuery

Question

ho il seguente codice per tenere traccia in cui un utente fa clic su un'immagine:

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

Quello che vorrei fare è, quando l'utente fa clic sull'immagine, voglio disegnare un punto alle coordinate X, Y del clic.

Qualcuno può darmi qualche consiglio su come questo può essere fatto?

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> 

Questo attirerà un nero div 1x1 pixel.

Answer 2

Metodo 1.

necessario fornire in loco utilizzare il tag canvas. https://developer.mozilla.org/en/Canvas_tutorial

Metodo 2.

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

funziona solo se la pagina non è scorrevole