Canvas HTML5，IE vs Chrome与FireFox - 字体和偏移量属性

Question

我开发了一个HTML5画布图，它检索SQL存储的信息并在HTML5画布上以图形方式绘制（以颜色标记）。画布允许在时间线上滚动以显示发生的各种事件（1990年至2013年间说）。

IE的功能就像一个魅力。

Chrome的上下文字体是泥泞/流血的影响 - 我使用等宽11px，后来改成了verdana，但仍然有点泥泞。 Firefox没有这个问题。

Firefox有一个问题，它在画布上检索并绘制信息，但是当我单击画布滚动时间线上当前位置的过去或未来时，整个画布消失。 Chrome没有这个问题。

我试图解释我在这个问题上的问题，如果你需要更多的澄清请问。

这里是示例代码： -

http://jsfiddle.net/WNpKE/16/

（如果你点击链接，并在IE，Firefox和Chrome浏览器打开它，我希望这个问题将变得更加明显）

// defining the canvas element 
      var can = document.getElementById("myCanvas"), 
       ctx = can.getContext("2d"), 
       dragging = false, 
       translated = 0, 
       lastX = 0, 
       grid = (function (dX, dY) { 
        var can = document.createElement("canvas"), 
         ctx = can.getContext('2d'); 
        can.width = dX; 
        can.height = dY; 
        // fill canvas color 
        ctx.fillStyle = 'black'; 
        ctx.fillRect(0, 0, dX, dY); 

        // x axis 
        ctx.strokeStyle = 'orange'; 
        ctx.moveTo(.5, 0.5); 
        ctx.lineTo(dX + .5, 0.5); 
        ctx.stroke(); 

        // y axis 
        ctx.moveTo(.5, .5); 
        ctx.lineTo(.5, dY + .5); 
        ctx.stroke(); 

        return ctx.createPattern(can, 'repeat'); 
       })(72, 50); 

      ctx.save(); 
      /*ctx.scale(1, -1); 
      ctx.translate(0, -900);*/ 



      // when mouse is clicked on canvas 
      can.onmousedown = function (e) { 
       var evt = e || event; 
       dragging = true; 
       lastX = evt.offsetX; 
      } 


      // when mouse is clicked again and the canvas is deselected 
      window.onmouseup = function() { 
       dragging = false; 
      } 




      window.onmousemove = function (e) { 
       var evt = e || event; 
       if (dragging) { 
        var delta = evt.offsetX - lastX; 
        translated += delta; 
        //console.log(translated); 
        ctx.restore(); 
        ctx.clearRect(0, 0, 930, 900); 
        ctx.save(); 
        ctx.translate(translated, 0); 
        lastX = evt.offsetX; 
        timeline(); 
       } 
      } 






      // Function that draws the timeline on the xy grid along with data points. 
      function timeline() { 

       // fill canvas color 
       ctx.fillStyle = "black"; 
       ctx.fillRect(-translated, 0, 930, 900); 
       ctx.fillStyle = grid; 
       ctx.fillRect(-translated, -250, 930, 900); 


       // y-co-ordinate texts - Home, Office, Emergency, etc... 
       ctx.strokeStyle = "White"; 
       ctx.font = "10px Verdana"; 
       ctx.strokeText("Home", -translated, 510); 

       ctx.strokeStyle = "White"; 
       ctx.font = "10px Verdana"; 
       ctx.strokeText("Office", -translated, 460); 

       ctx.strokeStyle = "White"; 
       ctx.font = "10px Verdana"; 
       ctx.strokeText("Emergency", -translated, 410); 

       ctx.strokeStyle = "White"; 
       ctx.font = "10px Verdana"; 
       ctx.strokeText("Foster Home", -translated, 360); 

       ctx.strokeStyle = "White"; 
       ctx.font = "10px Verdana"; 
       ctx.strokeText("SNF", -translated, 310); 

       ctx.strokeStyle = "White"; 
       ctx.font = "10px Verdana"; 
       ctx.strokeText("LTC", -translated, 260); 

       ctx.strokeStyle = "White"; 
       ctx.font = "10px Verdana"; 
       ctx.strokeText("Drug/Rehab", -translated, 210); 

       ctx.strokeStyle = "White"; 
       ctx.font = "10px Verdana"; 
       ctx.strokeText("Hospital", -translated, 160); 

       ctx.strokeStyle = "White"; 
       ctx.font = "10px Verdana"; 
       ctx.strokeText("Hospice", -translated, 110); 


       ctx.strokeStyle = "White"; 
       ctx.font = "10px Verdana"; 
       ctx.strokeText("ANP Exams", -translated, 540); 
       ctx.strokeStyle = "White"; 
       ctx.font = "10px Verdana"; 
       ctx.strokeText("Life Event", -translated, 560); 
       ctx.strokeStyle = "White"; 
       ctx.font = "10px Verdana"; 
       ctx.strokeText("Care Plan", -translated, 610); 

因为这样的代码，我已经改变了一点，但点击和滚动的基本思想仍然是相同的。谢谢。

Answer 1

使用fillText而不是strokeText。

FF错误正在发生，因为FF事件对象没有offsetX属性。改为使用pageX。

更新小提琴：http://jsfiddle.net/WNpKE/18/

Answer 2

查看highcharts API。它是免费的，并具有大量的功能。我最近在一个Web应用程序中使用它来查询来自SQL数据库的数据，与您正在做的不一样。它适用于所有主流浏览器。

我猜测canvas元素（作为html5的一个新特性）在浏览器之间的呈现方式不同。你可能会更好的重写javascript/java或者直接使用highcharts框架。我意识到这不是解决当前问题的方法，但它可以为您节省一些时间。

祝你好运！