Question

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

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

 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()函数获取画布左上角的坐标。从鼠标事件传递的坐标中减去这些，并在画布上显示位置。

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

A：您使用translate, transform or scale更改画布的坐标系（但是当您这样做时，您肯定会知道它）

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

HTML5 Canvas坐标和浏览器像素相关性？

解决

1 个答案: