Question

我有一个简单的画布测试，我似乎并没有让它在Firefox上运行。我真的在JS控制台上没有错误。版本是17.0.4，稍后将尝试更新的版本。这是代码：

<!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应该已经完成了诀窍但是它们没有...

谢谢你，问候

Answer 1

奇怪，但是Mozilla和Chrome都不喜欢你使用名为top的变量。

它似乎是与window相关的保留字。

将top更改为canvasTop，您应该没问题。

[编辑：轻笑 - 因为你已经发现了！下次我更好地阅读评论！]

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

这里的代码适用于IE，FF＆amp; Chrome：

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

无法使用Firefox在Canvas上绘制线条

1 个答案: