canvas坐标和浏览器文档布局坐标的转换

在给canvas绑定事件的时候用到最多的恐怕就是坐标转换了，坐标转换的小细节，注意哦！！！大家很容易忽略的一个小细节。

♦ 首先说下canvas的宽高

canvas默认情况下宽300px 高150px,大家有没有注意到一个奇怪的现象，当我们只通过css来改变canvas的默认尺寸的时候，绘制出来的图像表现很奇怪，感觉被缩放了，这是为什么呢，其实canvas有两套尺寸，元素本身的大小和绘图大小。
当我们通过css来设置canvas的width和height的时候改变的只是canvas元素本身的大小。并不会改变canvas的绘图大小，所以这个时候浏览器就会通过缩放功能来使绘图大小（也就是canvas里面的画布）适应canvas的元素大小，这也就是上面提到的缩放的原因。
如何避免这种问题呢，答案是肯定的，通过canvas.width=600;canvas.height=300;这种方式就会同时修改canvas元素本身的大小和绘图大小了。

♦ 重点来了，canvas坐标转换

像这样：

function canvasConvertCoordinate(canvas, x, y){
    var bound = canvas.getBoundingClientRect();
     return {
        x : x - bbox.left,
        y : y - bbox.top
    };
}

no,no,no!!!我们前面说了canvas的画布可能会缩放。
考虑到缩放，我们来优化这个canvas坐标转换函数：

function canvasConvertCoordinate(canvas, x, y){
    var bound = canvas.getBoundingClientRect();
     return {
        x : (x - bbox.left)*canvas.width/bound.width,
        y : (y - bbox.top)*canvas.height /bound.height
    };
}