Draw kropki na obrazie przy użyciu jQuery

Question

Mam następujący kod do śledzenia, gdzie użytkownik kliknie na obrazek:

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

Co chciałbym zrobić to, gdy użytkownik kliknie na obrazek, chcę narysuj kropkę na współrzędnych X, Y kliknięcia.

Czy ktoś może mi doradzić, jak to zrobić?

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> 

Będzie to narysować czarny piksel 1x1 div.

Answer 2

Metoda 1.

Będziesz musiał użyć znacznika canvas. https://developer.mozilla.org/en/Canvas_tutorial

Metoda 2.

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

Działa tylko wtedy, gdy strona nie jest przewijana