캔버스에 파이어 폭스로 선을 그릴 수 없습니다.

캔버스 테스트가 간단하고 파이어 폭스에서 작동하지 않습니다. JS 콘솔에서 실제로 오류가 발생하지 않습니다. 버전은 17.0.4이며 나중에 새 버전을 시도합니다. 여기에 코드입니다 : 잘 작동 MSIE에서캔버스에 파이어 폭스로 선을 그릴 수 없습니다.

<!DOCTYPE HTML> 
<HTML> 
<HEAD> 
<SCRIPT> 
var paint = false; 
var canvas; 
var cntxt; 
var top; 
var left; 

function initialise() { 
    canvas = document.getElementById("canvas_1"); 
    canvas.addEventListener("mousedown", doMouseDown, false); 
    canvas.addEventListener("mouseup", doMouseUp, false); 
    canvas.addEventListener("mousemove", doMouseMove, false); 
    cntxt = canvas.getContext("2d"); 
    cntxt.strokeStyle = '#ff0000'; 
    cntxt.lineWidth = 5; 
    cntxt.lineCap = 'round';  
    rect = canvas.getBoundingClientRect(); 
    top = rect.top; 
    left = rect.left; 
} 
function doMouseDown(event) { 
    paint = true; 
    x = event.layerX; 
    y = event.layerY; 
    document.getElementById("value_x").innerHTML = x; 
    document.getElementById("value_y").innerHTML = y; 
    cntxt.moveTo(x-left, y-top); 
    cntxt.beginPath(); 
    cntxt.stroke(); 
} 
function doMouseUp(event) { 
    paint = false; 
    x = event.layerX; 
    y = event.layerY; 
    document.getElementById("value_x").innerHTML = x; 
    document.getElementById("value_y").innerHTML = y; 
    cntxt.lineTo(x-left+1, y-top+1); 
    cntxt.stroke(); 
    cntxt.closePath(); 
} 
function doMouseMove(event) { 
    if(paint) { 
    x = event.layerX; 
    y = event.layerY; 
    document.getElementById("value_x").innerHTML = x; 
    document.getElementById("value_y").innerHTML = y; 
    cntxt.lineTo(x-left, y-top); 
    cntxt.stroke();  
    } 
} 
</SCRIPT> 
</HEAD> 
<BODY onLoad="initialise()"> 
<canvas width="400" height="400" id="canvas_1"> 
Canvas Tag not supported 
</canvas> 
<br> 
Value x: <span id="value_x"></span> 
<br> 
Value y: <span id="value_y"></span> 
</BODY> 
</HTML>

(버전 9)하지만 파이어 폭스 스팬 요소에 제대로 좌표를 표시하지만 선이 그려지지 않습니다 ... 나는 layerX 및 layerY를 사용하여이 있어야한다고 생각

당신과 관련

출처

2013-04-23 Martin

http://jsfiddle.net/pyHYG/에서 나를 위해 잘 작동하는 것 같다. 모든 변수/이벤트를 로그하여 모든 변수/이벤트가 예상대로 표시되는지 확인하십시오. –

글쎄, 그 방법으로 문제를 찾을 수있었습니다 ... 상단 및 왼쪽 변수가 어떻게 든 다른 객체에 매핑되므로 topMargin leftMargin 그리고 지금은 잘 작동하고 있습니다 ... 팁 주셔서 감사합니다 ... – Martin

그 이유는 당신이 전역을 사용해서는 안됩니다 ...;) –

홀수 감사하지만, 모질라와 크롬 모두 top라는 변수를 사용하여 당신을 좋아하지 않아 ... 트릭을 수행하지만,하지 않습니다.

window과 관련된 예약어로 나타납니다.

top에서 canvasTop으로 변경하면 문제가 없습니다.

[편집 : Chuckle - 이미 발견 했으니 까! 다음 번에 더 좋은 의견을 읽을 수 있습니다!]

layerX/layerY 대신 clientX/clientY를 사용할 수도 있습니다.

여기 IE에서 작동 코드입니다, FF & 크롬 (v20.0.1로하지만)`콘솔을 시도

<!DOCTYPE HTML> 
<HTML> 
<HEAD> 
<SCRIPT> 
var paint = false; 
var canvas; 
var cntxt; 
var canvastop; 
var left; 

function initialise() { 
    canvas = document.getElementById("canvas_1"); 
    canvas.addEventListener("mousedown", doMouseDown, false); 
    canvas.addEventListener("mouseup", doMouseUp, false); 
    canvas.addEventListener("mousemove", doMouseMove, false); 
    cntxt = canvas.getContext("2d"); 
    cntxt.strokeStyle = '#ff0000'; 
    cntxt.lineWidth = 5; 
    cntxt.lineCap = 'round';  
    rect = canvas.getBoundingClientRect(); 
    canvastop = rect.top; 
    left = rect.left; 
} 
function doMouseDown(event) { 
    paint = true; 
    x = event.clientX; 
    y = event.layerY; 
    document.getElementById("value_x").innerHTML = x; 
    document.getElementById("value_y").innerHTML = y; 
    cntxt.moveTo(x-left, y-canvastop); 
    cntxt.beginPath(); 
    cntxt.stroke(); 
} 
function doMouseUp(event) { 
    paint = false; 
    x = event.clientX; 
    y = event.clientY; 
    document.getElementById("value_x").innerHTML = x+"/"+left; 
    document.getElementById("value_y").innerHTML = y+"/"+canvastop; 
    cntxt.lineTo(x-left+1, y-canvastop+1); 
    cntxt.stroke(); 
    cntxt.closePath(); 
} 
function doMouseMove(event) { 
    if(paint) { 
    x = event.clientX; 
    y = event.clientY; 
    document.getElementById("value_x").innerHTML = x+"/"+left; 
    document.getElementById("value_y").innerHTML = y+"/"+canvastop; 
    cntxt.lineTo(x-left, y-canvastop); 
    cntxt.stroke();  
    } 
} 
</SCRIPT> 
</HEAD> 
<BODY onLoad="initialise()"> 
<canvas width="400" height="400" id="canvas_1"> 
Canvas Tag not supported 
</canvas> 
<br> 
Value x: <span id="value_x"></span> 
<br> 
Value y: <span id="value_y"></span> 
</BODY> 
</HTML>

출처

2013-04-23 17:12:27 markE

결국, 완전한 답을 썼습니다 ... 지금은 단지 하나의 작은 질문입니다. 각 브라우저에서 지원되는 기능을 어떻게 알 수 있습니까? 나는이 문제에 관한 적절한 문서를 찾지 못한 것 같다. 다른 한편으로, 나는 또한 Chrome과 싸우고 있었고, beginPath 이전에는 moveTo가 맘에 들지 않았습니다. 그래서 제대로 작동하려면 더 많은 요소를 변경해야했습니다. – Martin

예, 캔버스는 여러 브라우저에서 beginPath/closePath에 대해 까다롭게 느껴질 수 있습니다. 내 질문은 http://stackoverflow.com/questions/15995096/simple-canvas-code-misbehaving-in-ie10-and-fine-in-chrome을 참조하십시오. -can-you-confirm) 비공식적 인 규칙/regs/gotchas/pull 요청은 여기에 자세한 형식으로 나와 있습니다 : http://www.whatwg.org/specs/web-apps/current-work/multipage/ – markE

캔버스에 파이어 폭스로 선을 그릴 수 없습니다.

답변

관련 문제