Question

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

IE就像一个魅力。

Chrome有上下文字体是泥泞/流血效果的问题 - 我使用的是monospace 11px，后来我把它改成了verdana，但是还是有点混乱。 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);

自从这段代码以来我有所改变，但点击和滚动的基本思路仍然是一样的。谢谢。

Answer 1

使用fillText代替strokeText。

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

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

Answer 2

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

我猜测画布元素（作为html5的新功能）在浏览器之间的呈现方式不同。你可能最好还是在javascript / java中重写或者只是按原样使用highcharts框架。我意识到这不是你当前问题的解决方案，但它可以节省你一些时间。

祝你好运！

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

2 个答案: