canvas 如何获得内部的光标位置

Question

canvas 生成的图片，当鼠标移动到 canvas 里时，如何获取光标相对于 canvas 的坐标？

Answer 1

<div class="container">
    <canvas id="getMousePos" width="500" height="500"></canvas>
</div>
<script>
    var oGetMousePos = document.getElementById("getMousePos");
    var oContext = oGetMousePos.getContext("2d");

    //打印鼠标指针坐标
    function writeMessage (oGetMousePos,message) {
        oContext.clearRect(0, 0, oGetMousePos.width, oGetMousePos.height);
        oContext.font = "20pt Microsoft JhengHei";
        oContext.fillStyle = "tomato";
        oContext.fillText(message, 10, 25);
    };
    //获取鼠标指针坐标
    function getMousePos (oContext, evt) {
        var rect = oGetMousePos.getBoundingClientRect();
        return {
            x: evt.clientX - rect.left,
            y: evt.clientY - rect.top
        };
    }
    //监听鼠标移动
    oGetMousePos.addEventListener("mousemove", function(evt){
        var mousePos = getMousePos(oGetMousePos, evt);
        var message = "鼠标指针坐标：" + mousePos.x + "," + mousePos.y;
        writeMessage(oGetMousePos, message);
    },false);
</script>

可参考：http://canvas.migong.org/getmousepos

Answer 2

和普通的结点没有什么区别：

$('#your-canvas-id').on('mousemove', function(e) {
    console.log(e.offsetX, e.offsetY);
});

Answer 3

推荐使用https://www.github.com/PengJi...
这是一个canvas 2d 渲染库，体量小，功能强大，支持画图，图形绑定时间，拖拽，放大缩小等。