1

HTML5 キャンバスで無料の描画ツールを作成するために使用しているコードを入手しました。このコードは Chrome では問題なく動作しますが、Firefox では、マウスがキャンバス上の別のポイントに描画されます。オフセット位置を調査して、Firefox に問題があるかどうかを確認しようとしましたが、何も見つかりませんでした。以下のコードを貼り付けました。ヘルプ/ポインターをいただければ幸いです。

function ChangeFreeVal()
{
var ValChecker = document.getElementById("FreeDRAW").value;
if(ValChecker=='ON'){
    document.getElementById("FreeDRAW").value = 'OFF';
}
else{
    document.getElementById("FreeDRAW").value = 'ON';
}
 }
  if(window.addEventListener) {
   window.addEventListener('load', function () {
    var canvas, context, tool;

 function init () {
   canvas = document.getElementById('canvas');
    if (!canvas) {
    alert('Error: I cannot find the canvas element!');
    return;
    }
 if (!canvas.getContext) {
  alert('Error: no canvas.getContext!');
  return;
 }

context = canvas.getContext('2d');
if (!context) {
  alert('Error: failed to getContext!');
  return;
}
 tool = new tool_pencil();

canvas.addEventListener('mousedown', ev_canvas, false);
canvas.addEventListener('mousemove', ev_canvas, false);
canvas.addEventListener('mouseup',   ev_canvas, false);
}
function tool_pencil () {
var tool = this;
this.started = false;
this.mousedown = function (ev) {
var checker = document.getElementById('FreeDRAW').value;
    if(checker=='ON'){
    context.beginPath();
    context.moveTo(ev._x, ev._y);
    tool.started = true;
    document.getElementById('middle_centre_canvas').style.opacity = 1;
    }
   };
  this.mousemove = function (ev) {
    if (tool.started) {
    var checker = document.getElementById('FreeDRAW').value;
    if(checker=='ON'){
     context.lineTo(ev._x, ev._y);
    context.lineJoin = "round";
    var linewidthVAL = document.getElementById('FreeSize').value;
    if(linewidthVAL==1){
        context.lineWidth = 5;
    }
    else if(linewidthVAL==2){
        context.lineWidth = 10;
    }
    else if(linewidthVAL==3){
        context.lineWidth = 15;
    }
    else if(linewidthVAL==4){
        context.lineWidth = 22;
    }
    var linecolourVAL = document.getElementById('FreeColour').value;
    if(linecolourVAL==1){
        context.strokeStyle = 'blue';
    }
    else if(linecolourVAL==2){
        context.strokeStyle = 'green';
    }
    else if(linecolourVAL==3){
        context.strokeStyle = 'red';
    }
    else if(linecolourVAL==4){
        context.strokeStyle = 'purple';
    }
    else if(linecolourVAL==5){
        context.strokeStyle = 'black';
    }
    else if(linecolourVAL==6){
        context.strokeStyle = 'white';
    }
    context.stroke();
    }
  }
 };
 this.mouseup = function (ev) {
  if (tool.started) {
    tool.mousemove(ev);
    tool.started = false;
    push();
  }
 };
 }
 function ev_canvas (ev) {
 if (ev.layerX || ev.layerX == '0') { 
  ev._x = ev.layerX;
  ev._y = ev.layerY;
 } else if (ev.offsetX || ev.offsetX == '0') { 
   ev._x = ev.offsetX;
  ev._y = ev.offsetY;
 }
var func = tool[ev.type];
if (func) {
  func(ev);
 }
 }
  init();
   }, false); }
4

1 に答える 1

1

andはすべてのブラウザーに存在するわけではないため、さまざまなブラウザーで_xand_yをまったく異なるものに設定しています。layerXlayerY

キャンバスに相対的な座標が必要な場合はev.clientX - canvas.getBoundingClientRect().left、垂直座標に and を使用することをお勧めします。

于 2013-04-02T17:21:30.873 に答える