[JS Master's road] HTML5 Canvas Animation Tutorial-Get the current coordinates of your mouse in real time

With the front of the Canvas Foundation, now the beginning is wonderful, the following canvas tutorial are all belong to the comprehensive application, has written the basic knowledge of common canvas, reference links are as follows:

[JS Master's Road] HTML5 Canvas Series Tutorial-Understanding canvas and basic usage methods

[JS Master's Road] HTML5 Canvas Series Tutorial-Mastering the Common API for drawing straight line graphics

[JS Master Road] HTML5 Canvas Series Tutorial-Start path Beginpath and close path Closepath detailed

[JS Master Road] HTML5 Canvas Series Tutorial-Arc plot curve shape (curves, arcs, circles)

[JS Master Road] HTML5 Canvas Series Tutorials-ArcTo (radians and two times, three Bezier curves and online tools)

[JS Master's Road] HTML5 Canvas Series Tutorial-line Style (Linewidth,linecap,linejoin,setlinedash)

[JS Master's Road] HTML5 Canvas Series Tutorial-Text style (Stroketext,filltext,measuretext,textalign,textbaseline)

[JS Master Road] HTML5 Canvas Series Tutorial-picture operations (Drawimage,clip,createpattern)

[JS Master's Road] HTML5 Canvas Series Tutorial-Status explanation (save and restore)

[JS Master Road] HTML5 Canvas Series Tutorial-pixel operation (inverse color, black and white, brightness, retro, mask, transparent)

[JS Master Road] HTML5 Canvas Series Tutorial-linear gradient, radial gradient and shadow settings

[JS Master's Road] HTML5 new timer requestanimationframe actual combat progress bar

This article to do a simple real-time access to mouse coordinates, in the canvas animation development, to get the coordinates of the mouse, keyboard keys and so on, are commonly used operations, we slowly have to encapsulate them into a public library.

One, the compatibility of events:

1 functionbindevent (obj, event, fn) {2         if(obj.attachevent) {//IE3Obj.attachevent (' on ' + event,function () {4 Fn.call (obj);5             });6}Else {7             //Chrome&ff8Obj.addeventlistener (event, FN,false);9         }Ten}

The above compatibility IE8 and fix this keyword in IE lower version of the point, the following compatible with Chrome and FF. Other more commonly used packages can refer to my JavaScript open source framework Gdom

Second, build a basic library with an immediate expression

To add a method to get mouse coordinates

1;(function(window) {2Window. G = {};3     functionbindevent (obj, event, fn) {4         if(obj.attachevent) {//IE5Obj.attachevent (' on ' + event,function () {6 Fn.call (obj);7             });8}Else {9             //Chrome&ffTenObj.addeventlistener (event, FN,false); One         } A     } -  -G.getpos =function(DOM) { the         varOPos = {x:0, y:0 }; -Bindevent (DOM, ' MouseMove ',function(EV) { -             varoevent = EV | |event, X, y; -             if(Oevent.pagex | |oevent.pagey) { +x =Oevent.pagex; -y =Oevent.pagey; +}Else { Ax = oevent.clientx + document.body.scrollLeft | |Document.documentElement.scrollLeft; aty = oevent.clientx + document.body.scrollTop | |Document.documentElement.scrollTop; -             } -X-=Dom.offsetleft; -Y-=Dom.offsettop; -Opos.x =x; -Opos.y =y; in         } ); -         returnOPos; to     }; +  -}) (window);

Third, the introduction of Encapsulated JS Library, binding canvas for listening objects, print the current mouse coordinates

The coordinates of the mouse, I drew here 2 lines, easy to observe.

12<meta charset= ' Utf-8 '/>3<script>4;(function(window) {5Window. G = {};6     functionbindevent (obj, event, fn) {7         if(obj.attachevent) {//IE8Obj.attachevent (' on ' + event,function () {9 Fn.call (obj);Ten             }); One}Else { A             //Chrome&ff -Obj.addeventlistener (event, FN,false); -         } the     } -  -G.getpos =function(DOM) { -         varOPos = {x:0, y:0 }; +Bindevent (DOM, ' MouseMove ',function(EV) { -             varoevent = EV | |event, X, y; +             if(Oevent.pagex | |oevent.pagey) { Ax =Oevent.pagex; aty =Oevent.pagey; -}Else { -x = oevent.clientx + document.body.scrollLeft | |Document.documentElement.scrollLeft; -y = oevent.clientx + document.body.scrollTop | |Document.documentElement.scrollTop; -             } -X-=Dom.offsetleft; inY-=Dom.offsettop; -Opos.x =x; toOpos.y =y; +         } ); -         returnOPos; the     }; *  $ }) (window);Panax Notoginseng</script> -<style> the #canvas { + border:1px dashed #aaa; A } the</style> +<script> -Window.onload =function(){ $     varOcanvas = Document.queryselector ("#canvas" ), $OGc = Ocanvas.getcontext (' 2d ' ), -width = ocanvas.width, height =Ocanvas.height, -Oinfo = Document.queryselector ("#info" ), theOPos =G.getpos (Ocanvas); -Ocanvas.addeventlistener ("MouseMove",function(){Wuyi              theOgc.clearrect (0, 0, width, height); - Ogc.beginpath (); WuOgc.moveto (opos.x, 0 ); - Ogc.lineto (opos.x, height); AboutOgc.moveto (0, opos.y); $ Ogc.lineto (width, opos.y); - Ogc.closepath (); -Ogc.strokestyle = ' #09f '; - Ogc.stroke (); A  +oinfo.innerhtml = ' The current coordinates of the mouse are: (' + opos.x + ', ' + opos.y + ') '; the},false ); - } $</script> the the<body> the<canvas id= "Canvas" width= "height=" ></canvas> the<div id= "Info" ></div> -</body>

D. Click ' Run code ' to preview the effect amount

<pead><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 = ' The current coordinates of the mouse are: (' + opos.x + ', ' + opos.y + ') '; }, False);} </script></pead><body><canvas id= "Canvas" width= "height=" ></canvas><div Id= "inFo "></div></body>
Run code

[JS Master's road] HTML5 Canvas Animation Tutorial-Get the current coordinates of your mouse in real time