Tengo aquí un código de JavaScript, que implementa un pad de firma. Funciona bien en Google Chrome pero no funciona en Firefox. Aquí está el código:

<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 admite HTML5 Canvas hasta donde yo sé. Y tengo la Versión 6. También verifiqué si JavaScript estaba deshabilitado, pero ese no era el problema. No tengo idea de por qué no funciona.

1
Luke 23 ago. 2011 a las 16:51

4 respuestas

La mejor respuesta

Hay tres cosas que debe cambiar: 1. borderWidth + "px solid # 00F000"; El borde no se mostrará en Firefox. Eliminar el vacío antes de px. 2. cambiar offsetX a clientX 3. cambiar offsetY a clientY

El código final:

<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> 
1
Robby Shaw 23 ago. 2011 a las 13:45

Use el siguiente código para el bloque 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>
1
Andrew D. 23 ago. 2011 a las 13:36

http://www.javascriptlint.com/online_lint.php, muestra que

DrawLine (evt.offsetX, evt.offsetY, evt.offsetX + 1, evt.offsetY + + 1)

Le falta un punto y coma. ¿Eso lo resuelve?

0
andyhasit 23 ago. 2011 a las 12:58

Las estructuras de eventos de Firefox son un poco diferentes de los cromos. Intente cambiar offsetX a clientX

1
Rickard 23 ago. 2011 a las 13:28