使用Firefox無法在畫布上畫線

我有一個簡單的畫布測試，我似乎沒有得到它在Firefox上的工作。我真的沒有JS控制檯上的錯誤。版本是17.0.4，稍後將嘗試新版本。下面的代碼：使用Firefox無法在畫布上畫線

<!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>

在MSIE它工作正常（第9版），但Firefox正確顯示的座標在span元素，但沒有繪製線條...我想，使用layerX和layerY應該有做的伎倆，但他們不...

謝謝你和問候

來源

2013-04-23 Martin

似乎在http://jsfiddle.net/pyHYG/工作得很好，我（雖然v20.0.1）嘗試'控制檯。記錄所有的變量/事件，看他們是否如預期的那樣。 – 2013-04-23 12:46:41

那麼，我能夠找到問題的方式......頂部和左側變量以某種方式映射到其他對象，所以我將它們重命名爲topMargin並leftMargin現在它工作得很好...謝謝你的提示... – Martin 2013-04-23 14:15:17

這就是爲什麼你不應該使用全局變量...;） – 2013-04-23 14:56:57

奇怪，但Mozilla和Chrome瀏覽器都不會使用一個名爲top變量喜歡你。

它似乎是與window有關的保留字。

更改top至canvasTop，你應該沒問題。

[編輯：笑 - 正如你已經發現的！下一次，我更好地閱讀評論！]

您可能還想使用clientX/clientY而不是layerX/layerY。

這裏的代碼在IE工程，FF &鉻：

<!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 2013-04-24 08:04:24

是的，canvas可以挑選關於beginPath/closePath跨瀏覽器（請參閱我的問題在這裏：http://stackoverflow.com/questions/15995096/simple-canvas-code-misbehaving-in-ie10-and-fine-in-chrome -can-you-confirm）非官方的規則/ regs/gotchas/pull-requests可以在他們詳細的表格中找到：http://www.whatwg.org/specs/web-apps/current-work/multipage/ – markE 2013-04-24 16:18:59

使用Firefox無法在畫布上畫線

回答

相關問題