当前位置:首页 > canvas坐标和浏览器文档布局坐标的转换

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

发布于 2019-02-20 阅读 362 次 Canvas Javascript HTML5

在给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
    };
}