画布绘图应用程序不会在Firefox中工作

Question

我正在研究这个小绘图应用程序类型的东西，但它在Firefox中不起作用。它虽然在Chrome中工作正常。这里是javascript，然后我只是在HTML中有一个普通的旧画布元素。任何帮助表示赞赏！

/* FOR THE DRAWING APPLICATION */ 
/* =========================== */ 

var canvasMouse, contextMouse; 

var started = false; 
var x, y; 

function initMouse() { 

    // Get the drawing canvas 
    canvasMouse = document.getElementById('drawing'); 
    contextMouse = canvasMouse.getContext('2d'); 

    // Add some event listeners so we can figure out what's happening 
    // and run a few functions when they are executed. 
    canvasMouse.addEventListener('mousemove', mousemovement, false); 
    canvasMouse.addEventListener('mousedown', mouseclick, false); 
    canvasMouse.addEventListener('mouseup', mouseunclick, false); 

} 

function mouseclick() { 
    // When the mouse is clicked. Change started to true and move 
    // the initial position to the position of the mouse 
    contextMouse.beginPath(); 
    contextMouse.moveTo(x, y); 
    started = true; 

} 
function mousemovement(e) { 

    // Get moust position 
    x = e.offsetX; 
    y = e.offsetY; 

    // If started is true, then draw a line 
    if(started) { 

     contextMouse.lineTo(x, y); 
     contextMouse.stroke(); 

    } 

} 

function mouseunclick() { 
    // Change started to false when the user unclicks the mouse 
    if(started) { 
     started = false;  
    } 

} 

任何想法？

Answer 1

offsetX和offsetY在Firefox中不支持（请参阅compatibility table here）。相反，您需要使用layerX和layerY。

下将工作在Firefox（见fiddle）：

/* FOR THE DRAWING APPLICATION */ 
/* =========================== */ 

var canvasMouse, contextMouse; 

var started = false; 
var x, y; 

function initMouse() { 

    // Get the drawing canvas 
    canvasMouse = document.getElementById('drawing'); 
    contextMouse = canvasMouse.getContext('2d'); 

    // Add some event listeners so we can figure out what's happening 
    // and run a few functions when they are executed. 
    canvasMouse.addEventListener('mousemove', mousemovement, false); 
    canvasMouse.addEventListener('mousedown', mouseclick, false); 
    canvasMouse.addEventListener('mouseup', mouseunclick, false); 

} 

function mouseclick(e) { 
    // When the mouse is clicked. Change started to true and move 
    // the initial position to the position of the mouse 

    // Get moust position 
    x = e.layerX; 
    y = e.layerY; 

    console.log("coords", x, y); 

    contextMouse.beginPath(); 
    contextMouse.moveTo(x, y); 
    started = true; 

} 
function mousemovement(e) { 

    // Get mouset position 
    x = e.layerX; 
    y = e.layerY; 

    console.log("coords", x, y); 

    // If started is true, then draw a line 
    if(started) {    
     contextMouse.lineTo(x, y); 
     contextMouse.stroke(); 

    } 

} 

function mouseunclick() { 
    // Change started to false when the user unclicks the mouse 
    if(started) { 
     started = false;  
    } 

} 

initMouse(); 

如果你想避免浏览器的特定条件代码和/或您的canvas元素是DOM层次结构中的偏移量（读layerX的局限性，与上面链接的兼容性表中的layerY），可能会有使用jQuery及其position() method的参数。