0

私はこの小さな描画アプリケーションタイプのものに取り組んでいますが、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;    
    }

}

何か案は？

4

1 に答える 1

0

offsetXoffsetYFirefoxではサポートされていません（互換性の表はこちらをご覧ください）。代わりに、とを使用する必要があり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();

ブラウザ固有の条件付きコードを避けたい場合、および/またはキャンバス要素がDOM階層内でオフセットされている場合（上記にリンクされている互換性テーブルのlayerXとlayerYの制限を読んでください）、jQueryとそのposition()メソッドを使用するための引数があるかもしれません。

于 2012-05-15T00:57:16.840 に答える