HTML5 Canvas - 图像在 ie10 中不工作/显示答案

【问题标题】：HTML5 Canvas - image not working/showing up in ie10HTML5 Canvas - 图像在 ie10 中不工作/显示
【发布时间】：2013-07-09 21:06:29
【问题描述】：

我刚刚开始研究 html5 和 canvas 元素，并且一直在尝试创建一个简单的页面，该页面可以在单击按钮时顺时针和逆时针旋转图像。我设法得到了一些工作，但我在 ie10 上对其进行了测试，但图像没有显示出来，只是空白的灰色画布。我只能在 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 等中的外观）：

ie10 的截图：

任何人都可以帮助解决导致此问题的原因吗？

【问题讨论】：

标签： html internet-explorer canvas internet-explorer-10

【解决方案1】：

IE 10 不支持const。将其更改为var。这至少是它不起作用的一个原因。

此外，调试器（在 IE10 中并没有那么神奇）仍然是您的朋友。我们称他为“半朋友”。用他。他说什么？

【讨论】：

感谢 Jarrod，从 const 到 var 的变化加上来自 @Ken 的 image.onload 起到了作用：)