1

私はhtml5とキャンバス要素を調べ始めたばかりで、ボタンのクリックで時計回りと反時計回りに画像を回転させる単純なページを作成しようとしています。私は何かを動作させることができましたが、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 のスクリーンショット:

ie10

誰でもこれを引き起こしているのを助けることができますか?

4

1 に答える 1

6

IE 10 はサポートしていませんconst。に変更しvarます。少なくとも、それが機能しない理由の 1 つになります。

また、デバッガー (IE10 ではそれほど驚くべきことではありません) は、依然としてあなたの味方です。私たちは彼を「セミフレンド」と呼びます。彼を使ってください。彼はなんと言ったの？

于 2013-07-09T21:28:24.873 に答える