每次旋转1度,转45次
setInterval方法,达到指定度数后clearInterval

解决方案 »

  1.   

    <html>
    <head>
    <title></title>
    <script type="text/javascript">
    function rotateImage() {
    imageToRotate = document.getElementById('imgRotate');           
    imageToRotate.style.filter= "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')";
    window.setTimeout("rotate()",100);
    }
    var imageToRotate;
    var degreeToRotate=0;
    function rotate(){
    var deg2radians = Math.PI * 2 / 360;
    degreeToRotate++;
    degreeToRotate=degreeToRotate%360;                  
    rad = degreeToRotate * deg2radians ;
    costheta = Math.cos(rad);
    sintheta = Math.sin(rad);
    imageToRotate.filters.item(0).M11 = costheta;
    imageToRotate.filters.item(0).M12 = -sintheta;
    imageToRotate.filters.item(0).M21 = sintheta;
    imageToRotate.filters.item(0).M22 = costheta; 
    window.setTimeout("rotate()",100);
    }
    </script>
    </head>
    <body onload="rotateImage();">
    <br />  
    <canvas id="canvas" width="800" height="600">
    <img id="imgRotate" src="http://www.baidu.com/img/logo-yy.gif" />
    </canvas>
    </body>
    </html>
     
      

  2.   

    filters   IE Only...