为什么此代码适用于 chrome 但不适用于 Firefox答案

【问题标题】：Why does this code work for chrome but not for firefox为什么此代码适用于 chrome 但不适用于 Firefox
【发布时间】：2011-08-23 21:45:34
【问题描述】：

我这里有一些实现签名板的 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，但这不是问题。我不知道为什么它不起作用。

【问题讨论】：

控制台会显示什么？任何报告的错误？
你确定 Firefox 支持 HTML5 吗？我已经使用 Chrome 有一段时间了，所以我不知道 FF 在哪里——但我会仔细检查 FF（尤其是您安装的版本）是否支持 Canvas。编辑 - 好的，谷歌搜索显示确实如此，但请确保您的版本如此。
@transistor1: 为什么不先检查呢？如果谷歌太硬，还有caniuse.com/#search=canvas
@Wladimir Palant - 哎哟。如您所见，在您发布友好帖子之前，我确实检查过；但是 OP 仍然需要检查他/她的版本是否支持 Canvas，谢谢。

标签： javascript html canvas

【解决方案1】：

你需要改变三件事： 1.边框宽度+“像素固体#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>

【讨论】：

【解决方案2】：

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

【讨论】：

现在可以了。但是画布的边界没有设置。任何想法如何解决这个问题？
@Luke - 请参阅我在“canvas.style.border=" 行的帖子并发表评论 - 它描述了未设置边框的原因/

【解决方案3】：

为 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>

【讨论】：

【解决方案4】：

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

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

缺少分号。解决了吗？

【讨论】：

好的，抱歉。但是，根据我的经验，当出现问题时，总是值得通过 lint 运行 js，尤其是在不同浏览器上的工作方式不同时。我知道问题出在 FF 而不是 Chrome，但是当导致其他浏览器出现实际错误时，Chrome 的 js 控制台经常会给出有用的警告。 Chrome 的 js 控制台能告诉你什么吗？