Question

上面的jsfiddle是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();

Answer 1

问题在于offsetX

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

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

Updated Fiddle

html5画布中的OffsetX适用于IE，Safari，Chrome，但不适用于Firefox

1 个答案: