我刚刚开始研究 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 截图：
任何人都可以帮助解决造成这种情况的原因吗？