Question

我在这里有一些javascript代码，它实现了一个签名板。它在谷歌浏览器上工作正常，但它不适用于Firefox。这是代码：

<html>
   <head>
      <title>Signature Pad</title>
     <script src="lib/jquery-1.6.2.min.js" type="text/javascript"></script>
      <script type="text/javascript">
      //fires when document is loaded and DOM is ready.
      $(document).ready(function() {

  var context, canvas, drawLine, mouseIsPressed, x, y, prevX, prevY, borderWidth;
         canvas = document.getElementById('canvas'); //retrieve canvas from dom by id that we have assigned
         context = canvas.getContext('2d'); //retrieve context
         borderWidth = 5; //let border width will be 5 pixel
         canvas.style.border = borderWidth + " px solid #00F000"; // 5 pixel width solid green border
         drawLine = function(x1, y1, x2, y2)
         {
            context.beginPath(); //create a path
            context.moveTo(x1 - borderWidth, y1 - borderWidth); //move to
            context.lineTo(x2 - borderWidth, y2 - borderWidth); //draw a line
            context.stroke(); // filled with "ink"
            context.closePath(); //close path
         };
         canvas.onmousedown = function(evt)
         {
            mouseIsPressed = true; //save that mouse is pressed
            drawLine(evt.offsetX, evt.offsetY, evt.offsetX + 1, evt.offsetY + + 1) //draw short line that looks like a dot
         };
         canvas.onmouseup = function(evt)
         {
            mouseIsPressed = false; //save that mouse is released
         };
         canvas.onmousemove = function(evt)
         {
            x = evt.offsetX; 
            y = evt.offsetY; //get current X and Y
            if(mouseIsPressed)
            {
               drawLine(prevX, prevY, x, y);  //draw a line on canvas from previous to current point.
            }
            prevX = x; prevY = y; //save previous x and y in both case, weather mouse is pressed or not
         };
      });



      </script>
   <head>
   <body>
      <canvas width="300" height="200" id="canvas"></canvas>
   </body>
</html>

据我所知，Firefox确实支持HTML5 Canvas。我确实有版本6.我还检查了javascript是否被禁用，但这不是问题。我不知道为什么它不起作用。

Answer 1

Firefox的事件结构与chromes略有不同。尝试将offsetX更改为clientX

Answer 2

使用SCRIPT块的下一个代码：

<script type="text/javascript">
  //fires when document is loaded and DOM is ready.
  $(document).ready(function() {
    var context, canvas, drawLine, mouseIsPressed, x, y, prevX, prevY, borderWidth;
    canvas = document.getElementById('canvas');
    context = canvas.getContext('2d'); //retrieve context
    borderWidth = 5;
    canvas.style.border = borderWidth + "px solid #00F000"; // **here is no space before "px" for properly border drawing of canvas**
    drawLine = function(x1, y1, x2, y2)
    {
      context.beginPath(); //create a path
      context.moveTo(x1 - borderWidth, y1 - borderWidth); //move to
      context.lineTo(x2 - borderWidth, y2 - borderWidth); //draw a line
      context.stroke(); // filled with "ink"
      context.closePath(); //close path
    };
    canvas.onmousedown = function(evt)
    {
      mouseIsPressed = true; //save that mouse is pressed
      drawLine(evt.clientX, evt.clientY, evt.clientX + 1, evt.clientY + 1);
      prevX=evt.clientX; prevY=evt.clientY; // **You must initialize prevX and prevY firstly and use clientX, clientY** see [https://developer.mozilla.org/en/DOM/Event/UIEvent/MouseEvent][1]
    };
    canvas.onmouseup = function(evt)
    {
      mouseIsPressed = false; //save that mouse is released
    };
    canvas.onmousemove = function(evt)
    {
      x = evt.clientX; 
      y = evt.clientY;
      if(mouseIsPressed)
      {
        drawLine(prevX, prevY, x, y);
      }
      prevX = x; prevY = y;
    };
  });
</script>

Answer 3

您需要改变的三件事： 1. borderWidth +“px solid＃00F000”;边框不会在Firefox中显示。在px之前删除空。 2.将offsetX更改为clientX 3.将offsetY更改为clientY

最终代码：

<html> 
   <head> 
      <title>Signature Pad</title> 
     <script src="jquery-1.6.2.min.js" type="text/javascript"></script> 
      <script type="text/javascript"> 
      //fires when document is loaded and DOM is ready. 
      $(document).ready(function() { 

  var context, canvas, drawLine, mouseIsPressed, x, y, prevX, prevY, borderWidth; 
         canvas = document.getElementById('canvas'); //retrieve canvas from dom by id that we have assigned 
         context = canvas.getContext('2d'); //retrieve context 
         borderWidth = 5; //let border width will be 5 pixel 
         canvas.style.border = borderWidth + "px solid #00F000"; // 5 pixel width solid green border 

         drawLine = function(x1, y1, x2, y2) 
         { 
            context.beginPath(); //create a path 
            context.moveTo(x1 - borderWidth, y1 - borderWidth); //move to 
            context.lineTo(x2 - borderWidth, y2 - borderWidth); //draw a line 
            context.stroke(); // filled with "ink" 
            context.closePath(); //close path 
         }; 
         canvas.onmousedown = function(evt) 
         { 
            mouseIsPressed = true; //save that mouse is pressed 
            drawLine(evt.clientX, evt.clientY, evt.clientX + 1, evt.clientY + + 1) //draw short line that looks like a dot 
         }; 
         canvas.onmouseup = function(evt) 
         { 
            mouseIsPressed = false; //save that mouse is released 
         }; 
         canvas.onmousemove = function(evt) 
         { 
            x = evt.clientX;  
            y = evt.clientY; //get current X and Y 
            if(mouseIsPressed) 
            { 
               drawLine(prevX, prevY, x, y);  //draw a line on canvas from previous to current point. 
            } 
            prevX = x; prevY = y; //save previous x and y in both case, weather mouse is pressed or not 
         }; 
      }); 

      </script> 
   <head> 
   <body> 
      <canvas width="300" height="200" id="canvas" >Not support</canvas> 
   </body> 
</html>

Answer 4

http://www.javascriptlint.com/online_lint.php，显示

drawLine（evt.offsetX，evt.offsetY，evt.offsetX + 1，evt.offsetY + + 1）

缺少分号。这解决了吗？

为什么这段代码适用于chrome而不适用于firefox

4 个答案: