캔버스 그리기 응용 프로그램이 파이어 폭스에서 작동하지 않을 경우

Question

이 작은 그림 응용 프로그램 유형의 작업을하고 있지만 Firefox에서는 작동하지 않습니다. 그것은 크롬에서 잘 작동합니다. 여기 자바 스크립트가 있습니다. 그런 다음 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을 사용해야합니다.

파이어 폭스에서 작동합니다 다음 (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() method을 사용하기위한 인수가있을 수 있습니다.