使用jQuery在图像上绘制点

我有以下代码跟踪用户单击图像的位置：

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

$（“#testimg”）。单击（函数（ev）{
mouseX=ev.pageX；
mouseY=ev.pageY
警报（mouseX+“”+mouseY）；
})

我想做的是，当用户点击图像时，我想在点击的X，Y坐标上画一个点

有人能给我一些建议吗？方法一

你必须使用canvas标签。

方法2

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

$（“#testimg”）。单击（函数（ev）{
mouseX=ev.pageX；
mouseY=ev.pageY
//警报（mouseX+“”+mouseY）；
var color='#000000'；
变量大小='1px'；
$（“正文”）。附加(
$('')
.css（'位置'，'绝对'）
.css（'top'，mouseY+'px'）
.css（'left'，mouseX+'px'）
.css（'width'，size）
.css（'高度'、大小）
.css（'background-color'，color）
);
})

这将绘制一个黑色1x1像素分区。
如果testimg位于另一个定位容器中，该怎么办？如何使其相对于窗口定位点？如果调整窗口大小或有滚动，我想可能会有一些问题。将“位置”设置为“绝对”，使其适用于可滚动页面
<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>