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 はスパン要素に座標を適切に表示しますが、線は描画されません... layerX と layerY を使用すればうまくいくはずだと思っていましたが、そうではありません...

ありがとうございます

4

1 に答える 1

2

奇妙ですが、Mozilla と Chrome の両方が、 という変数を使用することを好みませんtop。

に関連する予約語のようwindowです。

に変更topするcanvasTopと、問題ないはずです。

[編集: くすくす笑い -- あなたがすでに発見したように! 次回はコメントをもっとよく読みます！]

また、layerX/layerY の代わりに clientX/clientY を使用することもできます。

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 に答える