Javascript 画布绘图应用程序在Firefox中无法工作

我正在做这个绘图应用程序类型的小东西，但它在Firefox中不起作用。但它在铬合金中工作良好。这是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;    
    }

}

---

有什么想法吗

offsetX

和

offsetY

在firefox中不受支持（请参阅）。相反，您需要使用

layerX

和

layerY

以下内容将在firefox中使用（请参阅）：

---

如果要避免浏览器特定的条件代码和/或画布元素在DOM层次结构中发生偏移（请阅读上面链接的兼容表中layerX和layerY的限制），则可能存在使用jQuery及其属性的参数

canvas元素有点新，很难在不同的浏览器中使用。到底是什么不起作用？什么都不起作用。这幅画不行。它应该是一种简单的绘图应用程序，但它不会绘图！

/* 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();