js入门系列之

位置及相对位置事宜坐标

写过代码的平常都晓得，在页面操纵中，坐标观点是一个很主要的观点，险些一切的页面交互都牵扯到坐标的观点。尤其是在游戏中， 坐标观点更是制造游戏的最基本观点当中，不相识或许不清楚坐标观点，那末辛辛苦苦做的游戏能够沦为一个动画。关于在写js的时刻，清楚地相识并能辨别坐标观点是一件很主要的事，尤其是在js事宜中的多种坐标。下面我们举个例子来相识一下:

如图所示，我们监听点击testDiv与点击文档的事宜，我们能够在控制台视察输出的event信息。

在chrome浏览器下，所打印出的event信息中至少有6中关于坐标的信息，下面我们就细致来谈谈各个坐标信息的寄义以及运用场所，做一个完全的位置信息文档~

• clientX，clienY
  clientX以及clientY示意的是事宜触发点在浏览器可见区域中相关于左上角的位置。
• layerX，layerY
  layerX及layerY示意的是事宜触发点相关于事宜发作地点dom节点左上角的位置。
• offsetX,offsetY
  与layerX、layerY类似，一样示意的是事宜触发点相关于事宜发作地点dom节点左上角的位置。
• pageX,pageY
  pageX和pageY示意的是事宜触发点基于全部文档左上角的相对位置，它是把你转动的间隔盘算在内的。
• screenX，screenY
  screenX和screenY示意的事宜触发点基于全部屏幕，相关于屏幕左上角的相对位置。
• x，y
  x、y与pageX、pageY类似，示意的一样是事宜触发点相关于文档左上角的位置。

来，我们用几张图来抽象的标示这些坐标所代表的位置信息：

然则并非一切浏览器都能供应一切坐标信息，比方x、y的观点在FireFox中是没有的。下图中说清楚明了种种浏览器关于差别坐标信息的兼容状况，我们在选用坐标的时刻不单单议要选用准确的坐标，还要斟酌在差别浏览器下的兼容。

好了，对事宜坐标的观点诠释到这，置信人人都已司理解了，下面我们来讲讲js中的元素坐标。

元素坐标

style
document.getElementById(‘id’).style.width=value
document.getElementById(‘id’).style.height=value
document.getElementById(‘id’).style.top=value
document.getElementById(‘id’).style.left=value

在js中，我们能够经由过程style去设置元素的位置以及宽高信息。值得注意的是，在IE浏览器中，我们设置值得时刻，value能够为数字，如
document.getElementById(‘id’).style.left=100
然则在其他浏览器中，value的值必需为字符串，如
document.getElementById(‘id’).style.left=“100px”
offset
value=document.getElementById(‘id’).offsetLeft
value=document.getElementById(‘id’).offsetTop
value=document.getElementById(‘id’).offsetWidth
value=document.getElementById(‘id’).offsetHeight

既然能够在js中设值，我们一样也能够在js中取值。我们能够经由过程offset获取到元素相关于文档的位置信息。元素信息另有很多，小编在这就不一一引见了，同学们有兴致本身去相识一下。

事宜坐标与元素坐标联用
在相识了事宜坐标与元素坐标以后，我们就能够做一些精准的页面间的交互了。用过canvas的同学们都晓得，canvas是h5壮大的新元素之一，是有愿望庖代flash的存在，不少网页都采纳canvas去做好玩的游戏。然则canvas有一点不是很好，canvas内部所绘制的图形是没有元素观点的，也就是说我们没法经由过程监听canvas内部元夙来做到交互。然则，我们能够经由过程准确的坐标转换来到达我们想要的结果。如今我们来做一个点击canvas中矩形然后页面中弹出hello的结果：

哈哈，这就是最简朴的一个页面交互了不是嘛？合营canvas能够获得很多炫酷的结果噢~canvas的涌现让前端在动画方面有了非常显著的改良，这也是我非常宠爱canvas的缘由之一~顺便给人人引荐两个canvas库，fabric.js以及konva.js。你，值得具有~好了，本期位置坐标观点引见到这里，同学们下课！下期再会~