HTML5简单的坐标网格知识

用html5我想对于坐标和网格应该不会陌生，那么接下来我简单的写下我的理解。

坐标：在HTML5的Canvas中是这样的定义的：

画的不咋的，很好理解吧。仔细看看不就是一些线和点呗，定义了一些数字而已，我们要做的不就是获取这些个数字。

既然知道了坐标，那么我们可以做很多的事了。这里是简单的介绍下，在html中点的话，肯定是浏览器规定了，我们只需要自己去调用而已，那么我们怎么知道呢?

那么就需要网格了。但是我们每次都要去画网格才知道坐标不是很麻烦。所以自己可以估计下画个草图呀。不用每次都去画了。有了设计图，那么我们调用就是html5中的

moveTo()和lineTo()了。这两个方法自己去看，很简单。

接下来看看网格：

网格：也就是些横线和竖线而已。怎么来的？还不是moveTo和lineTo的应用画出来的。代码如下：

//竖线
for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) {
context.beginPath();
context.moveTo(i, 0);
context.lineTo(i, context.canvas.height);
context.stroke();
}

//横线
for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) {
context.beginPath();
context.moveTo(0, i);
context.lineTo(context.canvas.width, i);
context.stroke();
}

一看就明白了。

竖线既然叫竖，那么相对坐标而言，不就是说随着横轴变化，那么也就是x变化，那么y呢？肯定是0和canvas的高了。

横线也是一样了，随着竖轴变化，也就是y变化，x就是0和canvas的宽了。

那么上面的stepx和stepy分别就是绘制网格时候的步数了，也就是竖线与竖线，横线与横线之间的距离。

为什么加0.5呢？那就是像素边界与线段的知识了，说白了也就是0-1之间我们放在0.5上，像素宽为1像素我们正好可以填充。

我们怎么获取坐标呢？

网上方法很多，其实都一样。用了Canvas. getBoundingClientRect()来获取Canvas对象相对屏幕的相对位置：该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；这里的top、left和css中的理解很相似，width、height是元素自身的宽高，但是　　right，bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离，bottom是指元素下边界距窗口最上面的距离。

那么我们说width和height是元素自身宽高什么概念呀？

就拿ie来说：

IE只返回top,lef,right,bottom四个值，不够可以通过以下方法来获取width,height的值：

    var ro = object.getBoundingClientRect();
    var Width = ro.right - ro.left;
    var Height = ro.bottom - ro.top;

这就是元素自身宽高了。

那么在Canvas中的表示就是：

function windowToCanvas(canvas, x, y) {
var bbox = canvas.getBoundingClinetRect();//获取Canvas对象相对屏幕的相对位置
return {x:x-bbox.left*(canvas.width/bbox.width),
y:bbox.top*(canvas.height/bbox.hight)}
}

很常见的获取坐标。为什么这么取，看你了。如何用当然是通过监听和触发了，网上看看好了，没有具体代码了。

 

晚安了，亲们！

 

转载于:https://www.cnblogs.com/jristy/p/4072466.html