在firefox下如何旋转图片？？

http://developer.mozilla.org/en/docs/HTML:Canvas<html>
 <head>
  <script type="application/x-javascript">
function draw() {
var PI = 3.14;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "http://www.csdn.net/images/newcsdnlogo.gif";

ctx.translate(150,150);
ctx.rotate (PI/2);

ctx.drawImage(img, 0,0);
}
  </script>
 </head>
 <body onload="draw()">
   <canvas id="canvas" width="300" height="300"></canvas>
 </body>
</html>

解决方案 »

  1.   

    写了个小函数，可以兼容IE和FireFox,希望对需要的人有帮助<script language="javascript">
    var isIE = (document.uniqueID)?1:0; 
    var i=1;
    function rotate(image)
    {
    var object = image.parentNode;
    if(isIE){
    image.style.filter="progid:DXImageTransform.Microsoft.BasicImage(Rotation="+i+")";
    i++;   
           if(i>4) {i=1};
    }
    else{
    try{
    var canvas = document.createElement('canvas');
    if(canvas.getContext("2d")) {
    canvas.id = image.id;
    canvas.alt = image.alt;
    canvas.name = image.name;
    canvas.title = image.title;
    canvas.className = image.className;
    canvas.style.cssText = image.style.cssText;
    canvas.height = image.height;
    canvas.width = image.width;
    object.replaceChild(canvas,image);

    var context = canvas.getContext("2d");
    context.translate(120, 0); 
    context.rotate(Math.PI*0.5);
    context.drawImage(image,0,0);
    }
    }catch(e){}
    }
    }
    </script>
    <img id="myimg" src="Sylar.gif" height="120" width="120" /><br />
    <input type="button" value="rotate" onclick="rotate(document.getElementById('myimg'))" />