canvas获取鼠标坐标

最新推荐文章于 2024-11-21 09:40:55 发布

转载最新推荐文章于 2024-11-21 09:40:55 发布 · 2.2k 阅读

收录于

html5 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一个使用HTML5 Canvas和JavaScript实现的简单应用，该应用能在画布上实时显示鼠标的位置坐标，通过监听mousemove事件并进行相应的坐标转换。

https://www.cnblogs.com/joyho/articles/3559049.html

如题，废话不多说。

demo截图：

源代码：

复制代码

<html>
<head>
    <title></title>
    <script>
    window.onload=function(){
        var canvas = document.getElementById("demoCanvas");
        var ctx = canvas.getContext("2d");
        var x,y;

        canvas.addEventListener("mousemove", function(e){
            var sw = (canvas.style.width.replace(/\px/g, ""))| 0,
                sh = (canvas.style.height.replace(/\px/g, ""))|0;

            if(e.pageX || e.pageY) {
                x = e.pageX;
                y = e.pageY;
            }else{
                x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
                y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
            }

            x -= canvas.offsetLeft;
            y -= canvas.offsetTop;

            if(sw) x *= canvas.width / sw;
            if(sh) y *= canvas.height / sh;
            x |= 0;
            y |= 0;

            ctx.clearRect(0,0,800,600);
            ctx.fillText("Mouse: X-"+x+",Y-"+y,100,100);
        },false);
    };
    </script>
</head>
<body>
    <canvas id="demoCanvas" width="800" height="600" style="background:#66ccdd;"></canvas>
</body>
</html>

复制代码