用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)}
}
很常見的獲取坐標。為什么這么取，看你了。如何用當然是通過監聽和觸發了，網上看看好了，沒有具體代碼了。
晚安了，親們！