Question

我正在处理这个小型绘图应用程序类型的东西，但它在Firefox中不起作用。虽然它在chrome中运行良好。这是javascript，然后我只是在HTML中有一个常规的旧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() {
    // 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

firefox不支持

offsetX和offsetY（请参阅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。

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

1 个答案: