рисовать точку на изображении с помощью JQuery

Question

У меня есть следующий код, чтобы отслеживать, когда пользователь нажимает на изображение:

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

То, что я хотел бы сделать это, когда пользователь нажимает на изображение, я хочу нарисуйте точку в координатах X, Y клика.

Может кто-нибудь дать мне несколько советов о том, как это можно сделать?

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> 

Это будет нарисовать черный 1x1 пиксель DIV.

Answer 2

Метод 1.

Вы Виль должны использовать холст тега. https://developer.mozilla.org/en/Canvas_tutorial

Способ 2.

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

Работает только если страница не прокручивать