Canvas 的 JavaScript 问题 - Chrome 中正常/Firefox 中错误

Question

我得到了一些代码，用于在 HTML5 Canvas 上制作免费的绘图工具。该代码在 Chrome 中运行良好，但在 Firefox 中，鼠标绘制到 Canvas 上的不同点。我试图研究偏移位置，看看 Firefox 是否有任何问题，但我还没有发现任何问题。我粘贴了下面的代码；任何帮助/指示将不胜感激。

function ChangeFreeVal()
{
var ValChecker = document.getElementById("FreeDRAW").value;
if(ValChecker=='ON'){
    document.getElementById("FreeDRAW").value = 'OFF';
}
else{
    document.getElementById("FreeDRAW").value = 'ON';
}
 }
  if(window.addEventListener) {
   window.addEventListener('load', function () {
    var canvas, context, tool;

 function init () {
   canvas = document.getElementById('canvas');
    if (!canvas) {
    alert('Error: I cannot find the canvas element!');
    return;
    }
 if (!canvas.getContext) {
  alert('Error: no canvas.getContext!');
  return;
 }

context = canvas.getContext('2d');
if (!context) {
  alert('Error: failed to getContext!');
  return;
}
 tool = new tool_pencil();

canvas.addEventListener('mousedown', ev_canvas, false);
canvas.addEventListener('mousemove', ev_canvas, false);
canvas.addEventListener('mouseup',   ev_canvas, false);
}
function tool_pencil () {
var tool = this;
this.started = false;
this.mousedown = function (ev) {
var checker = document.getElementById('FreeDRAW').value;
    if(checker=='ON'){
    context.beginPath();
    context.moveTo(ev._x, ev._y);
    tool.started = true;
    document.getElementById('middle_centre_canvas').style.opacity = 1;
    }
   };
  this.mousemove = function (ev) {
    if (tool.started) {
    var checker = document.getElementById('FreeDRAW').value;
    if(checker=='ON'){
     context.lineTo(ev._x, ev._y);
    context.lineJoin = "round";
    var linewidthVAL = document.getElementById('FreeSize').value;
    if(linewidthVAL==1){
        context.lineWidth = 5;
    }
    else if(linewidthVAL==2){
        context.lineWidth = 10;
    }
    else if(linewidthVAL==3){
        context.lineWidth = 15;
    }
    else if(linewidthVAL==4){
        context.lineWidth = 22;
    }
    var linecolourVAL = document.getElementById('FreeColour').value;
    if(linecolourVAL==1){
        context.strokeStyle = 'blue';
    }
    else if(linecolourVAL==2){
        context.strokeStyle = 'green';
    }
    else if(linecolourVAL==3){
        context.strokeStyle = 'red';
    }
    else if(linecolourVAL==4){
        context.strokeStyle = 'purple';
    }
    else if(linecolourVAL==5){
        context.strokeStyle = 'black';
    }
    else if(linecolourVAL==6){
        context.strokeStyle = 'white';
    }
    context.stroke();
    }
  }
 };
 this.mouseup = function (ev) {
  if (tool.started) {
    tool.mousemove(ev);
    tool.started = false;
    push();
  }
 };
 }
 function ev_canvas (ev) {
 if (ev.layerX || ev.layerX == '0') { 
  ev._x = ev.layerX;
  ev._y = ev.layerY;
 } else if (ev.offsetX || ev.offsetX == '0') { 
   ev._x = ev.offsetX;
  ev._y = ev.offsetY;
 }
var func = tool[ev.type];
if (func) {
  func(ev);
 }
 }
  init();
   }, false); }

Answer 1

您在不同的浏览器中将 _x 和 _y 设置为完全不同的内容，因为 layerX 和 layerY > 并非每个浏览器中都存在。

如果您想要相对于 Canvas 的坐标，我建议使用 ev.clientX - canvas.getBoundingClientRect().left 以及类似的垂直坐标。