【js】js 让图片旋转

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

核心： canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11=" + costheta + ",M12=" + (-sintheta) + ",M21=" + sintheta + ",M22=" + costheta + ",SizingMethod=‘auto expand‘)";看起来像ie专属的，ff chrome呢

css3实现图片旋转功能：支持的浏览器有chrome，firefox；opera是不支持的。
具体代码为：-moz-transfrom:rotate(90deg);-webkit-ransfrom:rotate(90deg);
上述代码的意思就是将图片顺时针旋转90度，其实可以旋转任意的度数。但是支持css3的浏览器只有chrome，firefox3.6 ，safari，ie浏览器是不支持的。那么IE
下该怎么处理呢？于是就有了下面的一种方案
2）在IE下通过滤镜来实现旋转
具体代码为：filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
这里的rotation 参数可以为0,1,2,3 ，表示的意思就是这些数字乘以90后的旋转角度。IE下如果要旋转任意的角度要用到矩阵变换滤镜，我们在日常的使用过程中，
大部分使用的是变换90的倍数，这里就不讨论任意的角度了。但是还是有问题的，如果非ie浏览器，不支持CSS3，那么如果实现图片的旋转呢，其实canvas也是可以图片旋转的。
3）用canvas来实现图片的旋转
canvas在chrome，firefox，opera等浏览器中均支持，他是有一个基于 JavaScript 的绘图 API，。首先我们来看看怎样利用canvas+JavaScript实现图片的旋转
代码如下：

复制代码 代码如下:

var test = function(){
        var canvas = document.getElementById("result");
        var oImg = document.getElementById("Img");
        canvas.height = 300;
        canvas.width = 200;
        var context = canvas.getContext("2d");
        context.save();
        context.translate(200,0);
        context.rotate(Math.PI/3);
        context.drawImage(oImg, 0, 0, 300, 200);
        context.restore();
        oImg.style.display = "none";
};
上述代码首先得到一个canvas对象，然后设置他的高度，开始绘图了。这个改变canvas的中心点和旋转角度，然后将图片画到canvas中去，将其存储起来，然后
隐藏之前的图片。这种方法实现还是比较平滑的。

jquery版转http://blog.csdn.net/cangkukuaimanle/article/details/7414985