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

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

发布于 2019-02-20 阅读 519 次 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坐标转换

像这样:

  1. function canvasConvertCoordinate(canvas, x, y){
  2. var bound = canvas.getBoundingClientRect();
  3. return {
  4. x : x - bbox.left,
  5. y : y - bbox.top
  6. };
  7. }

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

  1. function canvasConvertCoordinate(canvas, x, y){
  2. var bound = canvas.getBoundingClientRect();
  3. return {
  4. x : (x - bbox.left)*canvas.width/bound.width,
  5. y : (y - bbox.top)*canvas.height /bound.height
  6. };
  7. }