使用 jQuery 在图像上绘制点答案

【问题标题】：Draw dot on image using jQuery使用 jQuery 在图像上绘制点
【发布时间】：2011-04-10 10:14:40
【问题描述】：

我有以下代码来跟踪用户点击图片的位置：

 <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 坐标处画一个点。

有人可以给我一些关于如何做到这一点的建议吗？

【问题讨论】：

标签： jquery image drawing

【解决方案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。

【讨论】：

如果 testimg 在另一个定位的容器中怎么办？你是如何做到的，以便它相对于窗口定位点？
如果你调整窗口大小或者有滚动，我想会有一些问题。

【解决方案2】：

方法一。

你必须使用 canvas 标签。 https://developer.mozilla.org/en/Canvas_tutorial

方法二。

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

仅在页面不可滚动时有效

【讨论】：

将位置设置为绝对以使其适用于可滚动页面