[js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标

有了前面的canvas基础之后，现在开始就精彩了，后面写的canvas教程都是属于综合应用，前面已经写了常用的canvas基础知识,参考链接如下：

本文来做一个简单的实时获取鼠标坐标的功能，在canvas动画开发中，获取鼠标的坐标，键盘的按键等等，都是常用的操作，我们就慢慢得把他们封装成一个公共库。

一、事件的兼容：

 1 function bindEvent(obj, event, fn) {
 2         if (obj.attachEvent) { //ie
 3             obj.attachEvent('on' + event, function () {
 4                 fn.call(obj);
 5             });
 6         } else {
 7             //chrome&ff
 8             obj.addEventListener(event, fn, false);
 9         }
10     }

上面兼容ie8以及修正this关键字在ie低版本的指向，下面兼容chrome和ff。其他更常用的封装可以参考我的javascript开源框架gdom

二、用立即表达式搭建一个基本的库

添加获取鼠标坐标的方法

 1 ;(function (window) {
 2     window.G = {};
 3     function bindEvent(obj, event, fn) {
 4         if (obj.attachEvent) { //ie
 5             obj.attachEvent('on' + event, function () {
 6                 fn.call(obj);
 7             });
 8         } else {
 9             //chrome&ff
10             obj.addEventListener(event, fn, false);
11         }
12     }
13 
14     G.getPos = function( dom ){
15         var oPos = { x : 0, y : 0 };
16         bindEvent( dom, 'mousemove', function( ev ){
17             var oEvent = ev || event, x, y;
18             if ( oEvent.pageX || oEvent.pageY ){
19                 x = oEvent.pageX;
20                 y = oEvent.pageY;
21             }else {
22                 x = oEvent.clientX + document.body.scrollLeft || document.documentElement.scrollLeft;
23                 y = oEvent.clientX + document.body.scrollTop || document.documentElement.scrollTop;
24             }
25             x -= dom.offsetLeft;
26             y -= dom.offsetTop;
27             oPos.x = x;
28             oPos.y = y;
29         } );
30         return oPos;
31     };
32 
33 })(window);

三、引入封装的js库，绑定canvas为监听对象，打印当前鼠标的坐标

鼠标的坐标，我这里画了2根线，便于观察.

 1 <head>
 2 <meta charset='utf-8' />
 3 <script>
 4 ;(function (window) {
 5     window.G = {};
 6     function bindEvent(obj, event, fn) {
 7         if (obj.attachEvent) { //ie
 8             obj.attachEvent('on' + event, function () {
 9                 fn.call(obj);
10             });
11         } else {
12             //chrome&ff
13             obj.addEventListener(event, fn, false);
14         }
15     }
16 
17     G.getPos = function( dom ){
18         var oPos = { x : 0, y : 0 };
19         bindEvent( dom, 'mousemove', function( ev ){
20             var oEvent = ev || event, x, y;
21             if ( oEvent.pageX || oEvent.pageY ){
22                 x = oEvent.pageX;
23                 y = oEvent.pageY;
24             }else {
25                 x = oEvent.clientX + document.body.scrollLeft || document.documentElement.scrollLeft;
26                 y = oEvent.clientX + document.body.scrollTop || document.documentElement.scrollTop;
27             }
28             x -= dom.offsetLeft;
29             y -= dom.offsetTop;
30             oPos.x = x;
31             oPos.y = y;
32         } );
33         return oPos;
34     };
35 
36 })(window);
37 </script>
38 <style>
39 #canvas{
40     border:1px dashed #aaa;
41 }
42 </style>
43 <script>
44 window.onload = function(){
45     var oCanvas = document.querySelector( "#canvas" ),
46         oGc = oCanvas.getContext( '2d' ),
47         width = oCanvas.width, height = oCanvas.height,
48         oInfo = document.querySelector( "#info" ),
49         oPos = G.getPos( oCanvas );
50         oCanvas.addEventListener( "mousemove", function(){
51             
52             oGc.clearRect( 0, 0, width, height );
53             oGc.beginPath();
54             oGc.moveTo( oPos.x, 0 );
55             oGc.lineTo( oPos.x, height );
56             oGc.moveTo( 0, oPos.y );
57             oGc.lineTo( width, oPos.y );
58             oGc.closePath();
59             oGc.strokeStyle = '#09f';
60             oGc.stroke();
61 
62             oInfo.innerHTML = '鼠标的当前坐标是:(' + oPos.x + ',' + oPos.y + ')';
63         }, false );
64 }
65 </script>
66 </head>
67 <body>
68 <canvas id="canvas" width="500" height="400"></canvas>
69 <div id="info"></div>
70 </body>

四、点击'run code'可以预览效果额

<head>
<meta charset='utf-8' />
<script>
;(function (window) {
    window.G = {};
    function bindEvent(obj, event, fn) {
        if (obj.attachEvent) { //ie
            obj.attachEvent('on' + event, function () {
                fn.call(obj);
            });
        } else {
            //chrome&ff
            obj.addEventListener(event, fn, false);
        }
    }

    G.getPos = function( dom ){
        var oPos = { x : 0, y : 0 };
        bindEvent( dom, 'mousemove', function( ev ){
            var oEvent = ev || event, x, y;
            if ( oEvent.pageX || oEvent.pageY ){
                x = oEvent.pageX;
                y = oEvent.pageY;
            }else {
                x = oEvent.clientX + document.body.scrollLeft || document.documentElement.scrollLeft;
                y = oEvent.clientX + document.body.scrollTop || document.documentElement.scrollTop;
            }
            x -= dom.offsetLeft;
            y -= dom.offsetTop;
            oPos.x = x;
            oPos.y = y;
        } );
        return oPos;
    };

})(window);
</script>
<style>
#canvas{
    border:1px dashed #aaa;
}
</style>
<script>
window.onload = function(){
    var oCanvas = document.querySelector( "#canvas" ),
        oGc = oCanvas.getContext( '2d' ),
        width = oCanvas.width, height = oCanvas.height,
        oInfo = document.querySelector( "#info" ),
        oPos = G.getPos( oCanvas );
        oCanvas.addEventListener( "mousemove", function(){
            
            oGc.clearRect( 0, 0, width, height );
            oGc.beginPath();
            oGc.moveTo( oPos.x, 0 );
            oGc.lineTo( oPos.x, height );
            oGc.moveTo( 0, oPos.y );
            oGc.lineTo( width, oPos.y );
            oGc.closePath();
            oGc.strokeStyle = '#09f';
            oGc.stroke();

            oInfo.innerHTML = '鼠标的当前坐标是:(' + oPos.x + ',' + oPos.y + ')';
        }, false );
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
<div id="info"></div>
</body>

posted @ 2017-09-30 09:48 ghostwu 阅读(3664) 评论(4) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

ghostwu

Ubuntu+Vim下的程序员

[js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标

公告