HTML 5 Canvas Co-Ordinates 和浏览器像素相关？

Question

我正在尝试为我的应用程序获取 HTML 5 画布作为绘图板。我面临的问题是：

绘图发生在鼠标指针的某个偏移处。我正在使用 Jquery .offset 方法来计算画布上事件的偏移量。我注意到的另一件奇怪的事情是 虽然画布标签的宽度是 150 像素，但从 (0,10) 到 (150,10) 绘制的一条线刚好到达画布区域的中间，甚至一条线为大到 (0,10) 到 (250,10) 也是可见的。从事件对象映射计算的“像素”不是直接到画布标签的“点坐标”吗？这里还有什么问题？示例代码：

 if (event.pageX || event.pageY)
 {
    event._x = event.pageX;
    event._y = event.pageY;
}
else if (event.clientX || event.clientY)
{
    event._x = event.clientX + document.body.scrollLeft
                            + document.documentElement.scrollLeft;
    event._y = event.clientY + document.body.scrollTop
                            + document.documentElement.scrollTop;
}

var canvasElem = $('#' + canvasId);
canvasOffset = canvasElem.offset();

event._x -= Math.floor(canvasOffset.left);
event._y -= Math.floor(canvasOffset.top);

////////////// CODE STRIPPED //////////////////////////////


  this.mousedown = function (ev) { 
       context.beginPath(); 
       context.moveTo(ev._x, ev._y); 
       tool.started = true; 
  }; 

  // This function is called every time you move the mouse. Obviously, it only  
  // draws if the tool.started state is set to true (when you are holding down  
  // the mouse button). 
 this.mousemove = function (ev) { 
      if (tool.started) { 
         context.lineTo(ev._x, ev._y); 
         context.stroke(); 
       } 
 }; 

// This is called when you release the mouse button. 
this.mouseup = function (ev) { 
      if (tool.started) { 
         tool.mousemove(ev); 
         tool.started = false; 
      }
}

---

已解决

发现问题：

我使用字符串来设置画布的高度和宽度。 就像是： canvas.height = "200px";

但是我们应该总是使用数字来设置画布的高度/宽度。 canvas.height = 200;

这样就解决了问题。

Answer 1

您可以使用 jQuery .offset() 函数获取画布左上角的坐标。从鼠标事件传递的坐标中减去这些，你就得到了画布上的位置。

关于您遇到的缩放问题，有两种可能的解释：

答：您使用translate, transform or scale 来更改画布的坐标系（但当您这样做时，您肯定会意识到这一点）

B：您正在使用 CSS 样式属性来更改画布的大小。画布的分辨率由<canvas> HTML 标记的width 和height 属性决定。当您使用 CSS 更改呈现画布的宽度或高度时，它首先以内部分辨率绘制，然后相应地缩放以在浏览器中显示。