Javascript 画布HTML5，IE vs Chrome vs FireFox-字体和偏移量属性

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

他工作得很有魅力

Chrome存在上下文字体混浊/出血效果的问题-我使用的是monospace 11px，后来我将其改为verdana，但Chrome仍然有点混浊。Firefox没有这个问题

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

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

以下是示例代码：-

如果你点击链接并在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);

从这段代码开始，我做了一些修改，但是单击并滚动的基本思想仍然是一样的。谢谢

看看API。它是免费的，有大量的功能。我最近在一个web应用程序中使用了它，从SQL数据库中查询数据，这与您正在做的工作没有什么不同。它适用于所有主流浏览器

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

祝你好运

看看API。它是免费的，有大量的功能。我最近在一个web应用程序中使用了它，从SQL数据库中查询数据，这与您正在做的工作没有什么不同。它适用于所有主流浏览器

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

祝你好运

使用fillText而不是strokeText

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

更新的fiddle:

使用fillText而不是strokeText

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

---

更新的fiddle:

我可以验证Firefox的故障。文本不清晰，因为您使用的是strokeText而不是fillText@Shmiddty：是的！！你就是那个人。你知道FireFox的问题吗？我可以验证FireFox的故障。文本很混乱，因为你使用的是strokeText而不是fillText@Shmiddty：是的！！你就是那个人。你知道FireFox的问题吗？你的意思是如果我只是更换所有的evt.offsetX；用evt.pageX？@哲理亚是的，没错。你的意思是如果我只是替换所有的evt.offsetX；用evt.pageX？@哲理亚是的，没错。