[Js master path] html5 canvas animation tutorial,
With the canvas basics above, it is amazing now. The canvas tutorials written later are all comprehensive applications. The canvas basics have been frequently used. The reference links are as follows:
[Js master path] html5 canvas series tutorials-learn about canvas and basic usage
[Js master path] html5 canvas series tutorials-common APIs for drawing straight lines
[Js master path] html5 canvas series tutorials-Detailed description of the inpath and closePath
[Js master path] html5 canvas series tutorial-arc curve drawing (curve, arc, circle)
[Js guru's path] html5 canvas series tutorial-arcTo (radian and secondary, cubic besell curves and online tools)
[Js master path] html5 canvas series tutorials-line style (lineWidth, lineCap, lineJoin, setLineDash)
[Js master path] html5 canvas series tutorials-text styles (strokeText, fillText, measureText, textAlign, textBaseline)
[Js master path] html5 canvas series tutorials-image operations (drawImage, clip, createPattern)
[Js guru's path] html5 canvas series tutorials-Status Details (save and restore)
[Js master path] html5 canvas series tutorial-pixel operations (reversed color, black and white, brightness, retro, mask, transparent)
[Js master path] html5 canvas series tutorial-linear gradient, radial gradient and shadow settings
[Js master path] html5 new timer requestAnimationFrame progress bar
This article provides a simple function for obtaining mouse coordinates in real time. In canvas animation development, obtaining mouse coordinates, keyboard buttons, and so on are common operations, we have to encapsulate them into a public library.
I. Event compatibility:
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 }
The above is compatible with ie8 and the keyword "this" is corrected in earlier ie versions. The following is compatible with chrome and ff. For more common encapsulation, refer to my javascript open-source framework gdom.
2. Use an immediate expression to build a basic library
Add a method to obtain mouse coordinates
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&ff10 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);
3. Introduce the encapsulated js library, bind canvas as the listening object, and print the coordinates of the current mouse
The coordinates of the mouse. I drew two lines for easy observation.
14. Click 'run Code' to preview the effect.
<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.doc umentElement. scrollLeft; y = oEvent. clientX + document. body. scrollTop | document.doc umentElement. 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 coordinate of the mouse is: ('+ oPos. x + ',' + oPos. y + ')';}, false );} </script> </pead> <body> <canvas id = "canvas" width = "500" height = "400"> </canvas> <div id = "info"> </div> </body>
Run code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
