畫布繪圖應用程序不會在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的參數。