[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為監聽對象，打印當前鼠標的坐標

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>

<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>

[js高手之路] html5 canvas動畫教程 - 實時獲取鼠標的當前坐標

免責聲明！