Question

我刚刚开始研究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等中查看）：

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

ie10：

的屏幕截图

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

任何人都可以帮助解决造成这种情况的原因吗？

Answer 1

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

此外，调试器（在IE10中并不那么惊人）仍然是你的朋友。我们称他为'半朋友'。用他他说什么？

HTML5画布 - 图像无效/出现在ie10中

1 个答案: