如何在畫布上獲取鼠標單擊事件的正確位置

Question

我有一塊畫布：

Canvas = function(){ //v1.0
  var o = this;
  (o.penPos = {x: 0, y: 0}, 
   o.pixelSize = 10, 
   o.pen = {style: "solid", size: 1, color: "#000"}, 
   o.brush = {style: "solid", color: "#000"});
};

我在點擊事件上執行以下操作：

document.onclick = function(e){
  canvas.pixel(e.x, e.y);
}

但是它沒有顯示坐標的正確位置，我不知道出了什么問題，因為我是UI設計的新手。

Answer 1

如果您要收聽對所需document單擊，請執行以下操作：

event.offsetX 
event.offsetY

獲取相對於canvas元素的坐標。 您還需要檢查您的目標元素是感興趣的canvas元素。

您最好聽一下canvas元素本身的點擊。