How does html5 canvas get the current coordinates
This article mainly shows you "how to obtain the current coordinates of html5 canvas", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to obtain the current coordinates of html5 canvas" this article.
1. Compatibility of events:
1 functionbindEvent (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 fix this keyword points to the lower version of ie, and the following is compatible with chrome and ff. For other more commonly used wrappers, please refer to my javascript open source framework, gdom
Build a basic library with immediate expressions
Add a method to get mouse coordinates
1; (function (window) {2 window.G = {}; 3 functionbindEvent (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 var oEvent 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 = XTX 28 oPos.y = YTX 29}); 30 returnoPos;31}; 32
33}) (window)
3. Introduce encapsulated js library, bind canvas as listening object, and print the coordinates of the current mouse.
Mouse coordinates, I drew 2 lines here, easy to observe.
one
two
three
4; (function (window) {5 window.G = {}; 6 functionbindEvent (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, yten 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 = xTX 31 oPos.y = YTX 32}); 33 returnoPos;34}; 35
36} (window); 37
thirty-eight
39 # canvas {40 border:1px dashed # aaa;41} 42
forty-three
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 [XSS _ clean] =\ 'the current coordinates of the mouse are: (\' + oPos.x +\',\'+ oPos.y +\')\'; 63}, false); 64} 65
sixty-six
sixty-seven
sixty-eight
sixty-nine
seventy
4. Click\ 'run code\' to preview the effect.
; (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)
# canvas {
Border:1px dashed # aaa
}
_ 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 [XSS _ clean] =\ 'the current coordinates of the mouse are: (\' + oPos.x +\',\'+ oPos.y +\')\'
}, false)
}
The above is all the contents of the article "how to get the current coordinates of html5 canvas". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
