使用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.