HTML5畫布問題與InternetExplorer

Question

我有一個在IE瀏覽器中運行我的HTML5畫布網絡應用程序的問題。在所有其他網頁瀏覽器中都很有魅力。我的IE瀏覽器版本爲9

問題來自於下面的代碼行： -

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

錯誤信息： - 微軟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. 

我通過微軟視覺工作室2010年M編程使用C＃和Javascript。

我也使用JQuery。

任何想法，爲什麼這是問題？

我已經能夠通過將我的IE設置恢復到默認出廠設置或恢復高級設置來修復它。這個網絡應用程序開始工作了幾個星期左右，又是同樣的問題。更改兼容性視圖不會更改任何內容。

最新問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 相關問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.