用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)}
}
很常见的获取坐标。为什么这么取，看你了。如何用当然是通过监听和触发了，网上看看好了，没有具体代码了。
晚安了，亲们！