这里两天要实现一个功能，图片左右旋转

很是头大，在网上收集资料就花了2.5天+最后加上实际应用ie8 ，ie9 ，ie19上出现的各种问题+ 解决问题

在网上找了各种资料，了解到旋转又以下几种实现方案：

1，filer

2，transform

3，canvas

4，jquery

第一步：先判断ie版本（这里直说ie，因为我们的项目只支持ie）

这里要单独说ie10 了，一般的方法是不行的，因为ie有 strict mode 严格模式

（quirks mode和strict mode是浏览器解析css的两种模式，或者可以称之为解析方法）

法一：

function Ie10Vesion(){
var b_version=navigator.appVersion;
var version=b_version.split(";");
var trim_Version=version[1].replace(/[ ]/g,"");
if(trim_Version=="MSIE10.0"   ){
return "10";
}else if(trim_Version=="MSIE9.0"){
return "9";
}else{
return trim_Version;
}
};

这种判断方式在正真的ie10浏览器上是无用的那么要用第二种了，这是在googl上找到方法，百度没找到（花了一个上午才找到这个方法哦）

法二：

function IeVesion(){
var b_version=navigator.appVersion;
var isIE10 = /MSIE\s+10.0/i.test(navigator.userAgent)&& (function() {"use strict";return this === undefined;}());
if(isIE10){
 trim_Version = "IE10";
}
else if(navigator.appName == "Microsoft Internet Explorer" && b_version.match(/9./i)=="9.")
{ 
trim_Version = "IE9";
}
return trim_Version;
}

法二这种方法在ie10上可以判断，是因为了解了10版本的特性是严格模式

var hasStrictMode = (function() {
      "use strict";
      return this === undefined;
}());

如果这个hasStrictMode 方法返回true则是了

来个小插曲，在这里判断ie版本的时候我被坑了一天，因为我们系统里有人加了这一句搞得哦在ie10和ie9下都是alert（IE9）

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />

这些挨千刀的。。。。

html中：

<img id="view-image"  src="" />

javascript中：

第二步：各种测试

前面已经讲过判断ie版本的操纵，我就直接开始各种方法试了，虽然实际中我是先实验过了才知道要区分ie版本的，嘻嘻。

1，filer滤镜只能在ie8下版本使用（到目前为止2014-5-30 13:52:11），实践证明image图片标签在ie9和ie10需要用不同的东东来实现

代码：

var p;

var img = document.getElementById("view-image");

img.style.filter="progid:DXImageTransform.Microsoft.BasicImage(rotation="+p+");";

这里的p是0 、1、2、3；0是还原，1=90°、2=180°、3=270°

filer不能在ie9 和ie10上使用。

2，transform css样式各个版本都支持，之前看到这个的时候我背js文件和css的样式结构给吓到了，因为我不会写css，然后放弃用了canvas，后面canvas 和img中我项目的html结构问题，最终我还是采用了css的transfer来做旋转了，这个就一句话的事，比filter滤镜还简单，这个发现还是在我家亲爱的帮助下.......

var p;

var img = document.getElementById("view-image");

img.style.transform="rotate("+p+"deg)";

这里的p是时间旋转的度数，0是还原，如果要旋转45°那么p就是45,90°那么就是90 180°那么就是180

3，canvas 画布，哈哈重点来了，这就是我搞了3天 就为了做个旋转的，我觉得这个很有意思，我家亲爱的给了我一本书，叫我看，也是因为给了一本书我才决定把这一个星期的东西给总结下。

我的目标是把图片左右旋转，也不影响之前的其他放大、缩小、左右上下移动、的功能。在经历过把canvas标签和imag标签合用的痛苦过程后，我才觉悟，原来我只要一个canvas就可以实现了，原来的image我可以不实用了，下面就来看下，我是怎么弄的吧。

思路:搞一个canvas画布，把动态获取的图片jpg的插入到canvas，接下来的操作就直接把画布作为对象就好了；再直接canva的属性，合理运用就可以了。我看qq控件的图片旋转也是用的canvas，当然我是使用的ie10浏览器的。放松心情..其实之前很苦恼....呵

//插入图片到画布

function drawAA(){
var aa= new Image();  
aa.src = "xx.jpg"; 
if(aa.complete){
var mycanvas = document.getElementById("canvas");  
var myctx = mycanvas.getContext("2d");
myctx.drawImage(beauty, 0, 0);
}else{
        alert('美女加载失败，请重试');
    }
}

canvas方法：
save：保存状态；
clearRect：清除画布；
translate：水平/垂直移动坐标；
rotate：旋转坐标；
scale：缩放坐标；
drawImage：插入图像；
restore：恢复状态。

canvas必须在html5的网页上才用的！

4，jquery 没做，不记录

好就写到这里了，眼花了。

参考文献：http://www.cnblogs.com/cloudgamer/archive/2010/08/16/ImageTrans.html

                   http://www.w3school.com.cn/html5/html5_canvas.asp