Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.