Question

在firefox中检查这个画布示例，笔划有一个偏移到鼠标位置？在Chrome中它起作用。我该如何解决？

这里有一个小提琴： http://jsfiddle.net/wongwong/CvhMM/2/

  var canvas, context;

// Initialization sequence.
function init () {
// Find the canvas element.
canvas = document.getElementById('imageView');


// Get the 2D canvas context.
context = canvas.getContext('2d');


// Attach the mousemove event handler.
canvas.addEventListener('mousemove', ev_mousemove, false); 
}

// The mousemove event handler.
var started = false;
function ev_mousemove (ev) {
var x, y;

// Get the mouse position relative to the canvas element.
if (ev.layerX || ev.layerX == 0) { // Firefox
  x = ev.layerX;
  y = ev.layerY;
  console.log(ev.layerX);
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
  x = ev.offsetX;
  y = ev.offsetY;
}

// The event handler works like a drawing pencil which tracks the mouse 
// movements. We start drawing a path made up of lines.
if (!started) {
  context.beginPath();
  context.moveTo(x, y);
  started = true;
} else {
  context.lineTo(x, y);
  context.stroke();
}
}

init();

Answer 1

您只需要考虑画布元素偏移

 // Get the mouse position relative to the canvas element.
    if (ev.layerX || ev.layerX == 0) { // Firefox
     // added -this.offsetLeft, and -this.offsetTop
      x = ev.layerX - this.offsetLeft;
      y = ev.layerY - this.offsetTop;

      console.log(ev.layerX);
    } else if (ev.offsetX || ev.offsetX == 0) { // Opera
      x = ev.offsetX;
      y = ev.offsetY;
    }

<强> Live Demo

画布线偏移到鼠标位置

1 个答案: