HTML5畫布 - 圖像不工作/出現在IE10

我剛開始尋找html5和canvas元素，並試圖創建一個簡單的頁面，按順時針方向旋轉圖像，並在按鈕點擊時逆時針旋轉。我設法得到了一些工作，但我在ie10上進行了測試，圖像沒有顯示出來，只是空白的灰色畫布。我只能在ie10上測試，所以不確定這是否會影響其他版本。我完整的代碼：HTML5畫布 - 圖像不工作/出現在IE10

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
</head> 
<body> 
<!-- Canvas Element --> 
<canvas id="canvas" width="500" height="500" style="background-color: #EAEAEA;"> 
</canvas> 

<!-- Rotate Buttons --> 
<h2>Rotate</h2> 
<button onclick="rotate('c')">Clockwise</button> 
<button onclick="rotate('a')">Anti-Clockwise</button> 
<button onclick="rotate('r')">Reset</button> 

<script type="text/javascript"> 
    const FPS = 30; 
    var imagePosX = 90; 
    var imagePosY = 143; 
    var imageRot = 0; 
    var image = new Image(); 
    image.src = "sample.jpg"; 

    var canvas = null; 
    var context2D = null; 

    window.onload = startup; 

    function startup(){ 
     canvas = document.getElementById('canvas'); 
     context2D = canvas.getContext('2d'); 
     setInterval(draw, 500/FPS); 
    } 

    function rotate(d){ 
     setInterval(draw(d), 500/FPS); 
    } 

    function draw(d){ 
    if (d=='a'){imageRot -= 10;} 
    if (d=='c'){imageRot += 10;} 
    if (d=='r'){imageRot = 0;} 
    context2D.clearRect(0, 0, canvas.width, canvas.height); 
    context2D.save(); 
    context2D.translate(imagePosX+(image.width/2), imagePosY+(image.height/2)); 
    context2D.rotate(imageRot * Math.PI/180); 
    // optional shadow 
    context2D.shadowBlur = 15; 
    context2D.shadowColor = "rgb(0, 0, 0)"; 
    // 
    context2D.drawImage(image, 0, 0, image.width, image.height, -(image.width/2), -(image.height/2), image.width, image.height); 
    context2D.restore(); 
    } 
</script> 
</body> 
</html>

截圖它應該如何看（而且看上去在Chrome/Safari/Firefox的等）：

other browsers http://i40.tinypic.com/2vdjmz9.png

截圖供IE10：

ie10 http://i43.tinypic.com/15a91j.png

任何人都可以幫助什麼是造成這種情況？

來源

2013-07-09 odd_duck

IE 10不支持const。將其更改爲var。這至少會成爲不起作用的原因之一。

另外，調試器（這在IE10中並不是那麼棒）仍然是你的朋友。我們會稱他爲'半友'。用他。他說什麼？

來源

2013-07-09 21:28:24 Jarrod

謝謝Jarrod，從'const'到'var'的變化沒有把戲加上來自@Ken的image.onload :) –

+1好。 – K3N

HTML5畫布 - 圖像不工作/出現在IE10

回答

相關問題