画布笔触不在左上角时偏移

Question

我在画布上尝试了一个基本笔触。 一切顺利，直到我添加了工具栏和画廊。 现在，笔触从鼠标向下移动和鼠标移动操作偏移了。 有什么建议么？

http://jsfiddle.net/embrande/5aggd34h/

var canvas = document.getElementById('canvasID');
var context = canvas.getContext('2d');
var radius = 10
var dragging = false;

var canvasArea = document.getElementById('canvasArea');

//canvas.width = window.innerWidth;
//canvas.height = window.innerHeight;
canvas.width = 500;
canvas.height = 500;
//canvasArea.style.left = "0px";
//canvasArea.style.top = "0px";
//canvasArea.style.position = "relative";



context.lineWidth = radius*2;

var putPoint = function(e){
    if(dragging){
        context.miterLimit = 1;
        context.lineTo(e.clientX, e.clientY);
        context.stroke();
        context.beginPath();
        context.arc(e.clientX, e.clientY, radius, 0, Math.PI*2);
        context.fill();
        context.beginPath();
        context.moveTo(e.clientX, e.clientY);
    }

}
var engage = function(e){
    dragging=true;  
    putPoint(e);

}
var disengage = function(e){

    dragging=false; 
    context.beginPath();

}


canvas.addEventListener('mousedown', engage);
canvas.addEventListener('mousemove', putPoint);// JavaScript Document
canvas.addEventListener('mouseup', disengage);

Answer 1

尝试使用offsetX和offsetY而不是clientX和clientY。 但是某些浏览器无法识别offsetX和offsetY，因此请尝试layerX和layerY，但是在chrome中已弃用。 另一种选择是从clientY和clientX分别减去顶部偏移和左侧偏移。 这是使用offsetX和offsetY更新的代码。

或者您也可以使用此功能来获取精确的偏移量

function getOffset(evt) {
  var el = evt.target,
      x = 0,
      y = 0;

  while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
    x += el.offsetLeft - el.scrollLeft;
    y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }

  x = evt.clientX - x;
  y = evt.clientY - y;

  return { x: x, y: y };
}

Answer 2

您可以使用.getBoundingClientRect获取针对页面的画布位置和页面滚动量进行调整的鼠标位置：

function handleMousedown(e){
    var BB=canvas.getBoundingClientRect();
    var mouseX=e.clientX-BB.left;
    var mouseY=e.clientY-BB.top;
    // ...
}

如果您知道该页面不会滚动，则可以通过一次缓存左右偏移量并重新使用它们来提高性能：

var BB=canvas.getBoundingClientRect();
var bbLeft=BB.left;
var bbTop=BB.top;

function handleMousedown(e){
    var mouseX=e.clientX-bbLeft;
    var mouseY=e.clientY-bbTop;
    // ...
}