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 Studios 2010编程的。使用C＃和Javascript。

我也使用JQuery。

为什么会出现这个问题？

我已经能够通过将IE设置恢复为默认出厂设置或恢复高级设置来解决此问题。网络应用程序开始工作几周左右，同样的问题。更改兼容性视图不会改变任何内容。

Answer 1

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

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

$(window).load(function() {

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

});

HTML5 Canvas与Internet Explorer有关

1 个答案: