Javascript html5画布中的OffsetX可用于IE、Safari、Chrome，但不能用于Firefox

上面的JSFIDLE是html5画布中水平滚动的示例代码。这项功能似乎适用于IE、Chrome和Safari，而不适用于Firefox v25.0

有人能帮我解决这个问题吗？我认为这与屏幕上位置的转换有关。因为只有一个静态html5画布可以在Firefox上工作

谢谢

    var plot = [{
  x: 50,
  y: 100
}, {
  x: 200,
  y: 200
}, {
  x: 400,
  y: 300
}, {
  x: 500,
  y: 190
}];

var can = document.getElementById("can"),
  ctx = can.getContext('2d'),
  dragging = false,
  lastX = 0,
  translated = 0;

  var grid = (function(dX, dY){
  var can = document.createElement("canvas"),
      ctx = can.getContext('2d');
  can.width = dX;
  can.height = dY;
  // fill canvas color
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, dX, dY);

  // x axis
  ctx.strokeStyle = 'orange';
  ctx.moveTo(.5, 0.5);
  ctx.lineTo(dX + .5, 0.5);
  ctx.stroke();

  // y axis
  ctx.moveTo(.5, .5);
  ctx.lineTo(.5, dY + .5);
  ctx.stroke();

  return ctx.createPattern(can, 'repeat');
})(100, 50);

ctx.scale(1, -1);
ctx.translate(0, -400);

can.onmousedown = function (e) {
  var evt = e || event;
  dragging = true;
  lastX = evt.offsetX;
}

window.onmousemove = function (e) {
  var evt = e || event;
  if (dragging) {
    var delta = evt.offsetX - lastX;
    translated += delta;
    ctx.translate(delta, 0);
    lastX = evt.offsetX;
    draw();
  }
}

window.onmouseup = function () {
  dragging = false;
}

function draw() {
  ctx.clearRect(-translated, 0, 600, 400);
  ctx.rect(-translated, 0, 600, 400);
  ctx.fillStyle = grid;
  ctx.fill();
  ctx.fillStyle = "#fff";
  for (var i = 0; i < plot.length; i++) {
    ctx.beginPath();
    ctx.arc(plot[i].x, plot[i].y, 5, 0, 2 * Math.PI);
    ctx.fill();
  }
}

draw();

var图=[{
x:50，
y:100
}, {
x:200，
y:200
}, {
x:400，
y:300
}, {
x:500，
y:190
}];
var can=document.getElementById（“can”），
ctx=can.getContext（'2d'），
拖动=false，
lastX=0，
翻译=0；
变量网格=（函数（dX，dY）{
var can=document.createElement（“画布”），
ctx=can.getContext（'2d'）；
can.width=dX；
can.height=dY；
//填充画布颜色
ctx.fillStyle='黑色'；
ctx.fillRect（0，0，dX，dY）；
//x轴
ctx.strokeStyle=‘橙色’；
ctx.moveTo（.5,0.5）；
ctx.lineTo（dX+.5,0.5）；
ctx.stroke（）；
//y轴
ctx.moveTo（.5,5）；
ctx.lineTo（.5，dY+.5）；
ctx.stroke（）；
返回ctx.createPattern（can'repeat'）；
})(100, 50);
比例尺（1，-1）；
ctx.translate（0，-400）；
can.onmousedown=函数（e）{
var evt=e | |事件；
拖动=真；
lastX=evt.offsetX；
}
window.onmousemove=函数（e）{
var evt=e | |事件；
如果（拖动）{
var delta=evt.offsetX-lastX；
转换+=增量；
ctx.translate（delta，0）；
lastX=evt.offsetX；
draw（）；
}
}
window.onmouseup=函数（）{
拖动=假；
}
函数绘图（）{
clearRect（-translated，060400）；
ctx.rect（-translated，060400）；
ctx.fillStyle=网格；
ctx.fill（）；
ctx.fillStyle=“#fff”；
对于（变量i=0；i

问题在于

在Firefox中，event.offsetX是未定义的，但在Chrome和其他浏览器中，它给出了位置， 使用pageX可以解决您的问题

---

谢谢你，伙计！谢谢你的帮助。至少有人关心我的问题。我甚至不知道为什么我的问题被记下来了！

e.offsetX == undefined ? e.layerX : e.offsetX;