鼠标位置 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
        <style type="text/css">
        canvas {
            border: 1px solid #f00;
        }
    </style>
    <script type="text/javascript">
        function WriteMessage(canvas, message) {
            var context = canvas.getContext('2d');
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.font = "18pt Calibri";
            context.fillStyle = "black";
            context.fillText(message,10,25);
        }
        function getMousePos(canvas, evt) {
            // 获得 canvas 位置
            var obj = canvas;
            var top = 0;
            var left = 0;
            while (obj && obj.tagName != 'BODY') {
                top += obj.offsetTop;
                left += obj.offsetLeft;
                obj = obj.offsetParent;
            }
            // 返回鼠标相对位置
            // clientX 文档坐标
            //pageXOffset 指定浏览器窗口中文档左上角在窗口中的当前水平像素位置
            var mouseX = evt.clientX - left + window.pageXOffset;
            var mouseY = evt.clientY - top + window.pageYOffset;
            return {
                x: mouseX,
                y: mouseY
            };
        }
        window.onload = function () {
            var canvas = document.getElementById('myCanvas');
            var context = canvas.getContext('2d');
            canvas.addEventListener('mousemove', function (evt) {
                var mousePos = getMousePos(canvas, evt);
                var message = "Mouse position: " + mousePos.x + "," + mousePos.y;
                WriteMessage(canvas, message);
            }, false);
        };
    </script>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>

　　

posted @ 2012-11-20 17:50  bradleydan  阅读(95)  评论(0)    收藏  举报