2

我有一个简单的画布测试，但似乎无法在 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 应该可以解决问题，但他们没有......

谢谢和问候

4

1 回答 1

2

奇怪，但 Mozilla 和 Chrome 都不喜欢你使用名为top.

它似乎是与window.

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

[编辑：轻笑——正如你已经发现的那样！下次我更好地阅读评论！]

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

这是适用于 IE、FF 和 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>
于 2013-04-23T17:12:27.630 回答