internet explorer语言 - HTML5 Canvas issues with InternetExplore

Question

我在IE中运行html5 Canvas web应用程序时有一个持续的问题。在其他所有的浏览器中都很有魅力。我的IE是9版。

问题出在下面一行代码中:-

    var can = document.getElementById("myCanvas"),
              ctx = can.getContext("2d"),

错误信息:-Microsoft JScript运行时错误:对象不支持属性或方法'getContext'.

代码结构:-

(step1) Accept userID from Session variable.
(step2) Call Ajax function to post variable into a WebMethod on the Server side.
(step3) Web method does some queries and returns member classes with values as a JSON formatted string.
(step4) Parse these values and store them in variables on the client side.
(step5) Define canvas.
            var can = document.getElementById("myCanvas"),
                               ctx = can.getContext("2d"),
                               dragging = false,
                               translated = 0,
                               lastX = 0;
            // When a new query is ran, and the elements of the canvas are reprinted the following line of code will prevent the canvas 'bleeding effect'. //    
            can.width = can.width;

grid = (function (dX, dY) {
                // defining a new canvas inside our main canvas
                var can = document.createElement("canvas"),
                        ctx = can.getContext('2d');
                // defining width, height for new canvas
                can.width = dX;
                can.height = dY;
                // fill canvas color
                ctx.fillStyle = 'black';
                ctx.fillRect(0, 0, dX, dY);
                // sets the width of the lines that make up the grid
                ctx.lineWidth = 0.4;
                // sets the color of the lines that make up the grid
                ctx.strokeStyle = 'silver';
                // x axis
                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();
                // To create a pattern with the HTML5 Canvas, we can use the createPattern() method of the canvas context which returns a pattern object.
                return ctx.createPattern(can, 'repeat');
            })(72, 25); // size of each grid.
            ctx.save();
 function timeline1() {
                // fill canvas color
                ctx.fillStyle = "black";
                ctx.fillRect(-translated, 0, 930, 570);
                // setting the canvas to be filled with the previously defined x-y grid.  
                ctx.fillStyle = grid;
                ctx.fillRect(-translated, -250, 930, 2 * can.height);
                // setting the style for y co-ordinate labelling 
                ctx.fillStyle = "White";
                ctx.font = "11px monospace";
                // y co-ordinate labels - , etc... //
                ctx.fillText("L1", -translated, 310);
                ctx.fillText("L2", -translated, 285);
                ctx.fillText("L3", -translated, 260);
                ctx.fillText("L4", -translated, 235);


// when mouse is clicked on canvas
                can.onmousedown = function (e) {
                    var evt = e || event;
                    // dragging is set to true.
                    dragging = true;
                    //                        lastX = evt.offsetX;
                    lastX = evt.offsetX == undefined ? evt.layerX : evt.offsetX;
                    return false;
                }
                // when mouse is clicked again and the canvas is deselected
                window.onmouseup = function () {
                    // dragging is set to false.
                    dragging = false;
                    return false;
                }
                // when mouse is dragging the canvas sideways //
                window.onmousemove = function (e) {
                    var evt = e || event;
                    if (dragging) {
                        //                            var delta = evt.offsetX - lastX;
                        var delta = (evt.offsetX == undefined ? evt.layerX : evt.offsetX) - lastX;
                        translated += delta;
                        move(ctx, 930, 900);
                        //                            lastX = evt.offsetX;
                        lastX = evt.offsetX == undefined ? evt.layerX : evt.offsetX;
                        timeline1();;
                        return false;
                    }
                }
                // common code used to service either canvas
                function move(context, width, height) {
                    context.restore();
                    context.clearRect(0, 0, width, height);
                    context.save();
                    context.translate(translated, 0);
                }
(step6) Finally use other functions to draw data on canvas using variables sent by the WEbMethod.

我正在用Microsoft Visual studio 2010编程。使用c#和Javascript。

我也使用JQuery。

你知道为什么会有这个问题吗?

我已经能够修复它通过恢复我的IE设置默认的出厂设置，或恢复高级设置。web应用程序开始工作几周左右，再次出现同样的问题。

Answer 1

您可能在DOM完全加载之前加载/调用脚本。变量结果可能与缓存以及浏览器加载脚本的方式有关。

您没有显示足够的代码来查明问题，但尝试将您的自定义脚本移动到页面底部，或使用以下内容:

$(window).load(function() {
    var can = document.getElementById("myCanvas"),
        ctx = can.getContext("2d"),
        ...
});