"JS" js let the picture rotate

Turn http://www.cnblogs.com/ustcyc/p/3760116.html

Core:
Canvas.style.filter = "ProgID:DXImageTransform.Microsoft.Matrix(m11=" + Costheta + ", m12=" + (-sintheta) + ", M21= "+ Sintheta +", m22= "+ Costheta +", sizingmethod= ' auto expand ') ";
It looks like IE's exclusive, FF Chrome.

CSS3 Implementation of the image rotation function: Supported browsers have Chrome,firefox;opera is not supported. The specific code is:-moz-transfrom:rotate (90deg);-webkit-ransfrom:rotate (90deg), the meaning of the above code is to rotate the picture clockwise 90 degrees, in fact, you can rotate any degree. But browsers that support CSS3 have only chrome,firefox3.6, the Safari,ie browser is not supported. So what should be handled under IE? Then there is the following scenario2in IE, using filters to achieve the rotation of the specific code: Filter:progid:DXImageTransform.Microsoft.BasicImage (Rotation=1); Here the rotation parameter can be 0,1,2,3, which means that these numbers are multiplied by the angle of rotation. ie if you want to rotate any angle to use the matrix transform filter, we in the daily use of the process, most of the use of the transformation of 90 multiples, here does not discuss arbitrary angle. But there is still a problem, if non-IE browser, do not support CSS3, then if the implementation of the picture rotation, in fact, canvas can also be rotated pictures. 3using canvas to achieve the rotation of the picture canvas is supported in browsers such as Chrome,firefox,opera, which has a JavaScript-based drawing API. First, let's take a look at how to use canvas+the JavaScript implementation of the image rotation code is as follows: Copy code code as follows:varTest =function () {varCanvas = document.getElementById ("result"); varOimg = document.getElementById ("Img"); Canvas.height= -; Canvas.width= $; varContext = Canvas.getcontext ("2d");        Context.save (); Context.translate ( $,0); Context.rotate (Math.PI/3); Context.drawimage (oimg,0,0, -, $);        Context.restore (); OImg.style.display="None";}; The code above first gets a canvas object and then sets his height to start drawing. This changes the center point and rotation angle of the canvas, then draws the picture into the canvas, stores it, and hides the previous picture. The implementation of this method is still relatively smooth. 

jquery Edition
Turn http://blog.csdn.net/cangkukuaimanle/article/details/7414985

"JS" js let the picture rotate