图片的旋转可以说是一种效果，但是逐渐旋转已经不单单是属于视觉效果那个范畴，其更具有使用性，功能性。照片有时候是需要横过来的拍的，当我们预览或共享到web上时需要进行旋转。这个操作在以往可能更多的是交给软件去完成，然后再将旋转到正常角度的图片发布到web上。

　　我们在微博上可以对图片进行向左转向右转等旋转操作，让用户可以从不同的视角欣赏图片效果。本文将结合实例为您讲解如何使用Javascript结合相关技术来实现图片的旋转效果。我们使用HTML5的canvas标签可对图片进行旋转操作，对于ie6，7，8不支持HTML5的浏览器，我们使用IE特有的滤镜效果来实现图片旋转。

　　HTML

　　我们在页面中放置一张图片，在图片的上方放置两个按钮，通过onclick事件调用rotate()函数来控制图片向左向右旋转。

　　?

1 2 3 4 5 6 7 <div id="tool">     <a href="#" id="arr_left" onclick="rotate('myimg','left')">向左</a>     <a href="#" id="arr_right" onclick="rotate('myimg','right')">向右</a>  </div>  <div id="img">     <img src="demo.jpg" width="460" height="305" alt="" id="myimg" />  </div>

　　Javascript

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 function rotate(obj,arr){    var img = document.getElementById(obj);    if(!img || !arr) return false;    var n = img.getAttribute('step');    if(n== null) n=0;    if(arr=='left'){      (n==0)? n=3:n--;    }else if(arr=='right'){      (n==3)? n=0:n++;    }    img.setAttribute('step',n);    ...  }

　　我们写了个自定义函数rotate()，其中参数obj表示要旋转的图片对象的id，参数arr表示旋转方向，固定两个值:left(向左)和right(向右)。我们设置变量n是为了记录上下左右四种旋转状态，点击旋转按钮时可以保证持续的旋转的状态，即每次旋转是在上次旋转操作后的基础上再次旋转。

　　然后，我们要根据浏览器的不同进行不同的处理，对于IE系浏览器，可以使用他们特有的滤镜来实现旋转效果，虽然我们不建议使用滤镜，但为了兼容IE老版本，我们不得不重操这把旧刀。

　　?

1 2 3 4 5 6 7 8 9 10 function rotate(obj,arr){    ...    //对IE浏览器使用滤镜旋转    if(document.all) {      img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')';    // 对现代浏览器写入HTML5的元素进行旋转： canvas    }else{      ...    }  }

　　代码中，我们使用document.all判断是否为IE浏览器，如果是则使用滤镜，而对于firefox和chrome这样的现代浏览器，我们使用canvas来实现旋转效果。

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 function rotate(obj,arr){    ...    // 对现代浏览器写入HTML5的元素进行旋转： canvas    }else{      var c = document.getElementById('canvas_'+obj);      if(c== null){        img.style.visibility = 'hidden';        img.style.position = 'absolute';        c = document.createElement('canvas');        c.setAttribute("id",'canvas_'+obj);        img.parentNode.appendChild(c);      }      var canvasContext = c.getContext('2d');      switch(n) {        default :        case 0 :          c.setAttribute('width', img.width);          c.setAttribute('height', img.height);          canvasContext.rotate(0 * Math.PI / 180);          canvasContext.drawImage(img, 0, 0);          break;        case 1 :          c.setAttribute('width', img.height);          c.setAttribute('height', img.width);          canvasContext.rotate(90 * Math.PI / 180);          canvasContext.drawImage(img, 0, -img.height);          break;        case 2 :          c.setAttribute('width', img.width);          c.setAttribute('height', img.height);          canvasContext.rotate(180 * Math.PI / 180);          canvasContext.drawImage(img, -img.width, -img.height);          break;        case 3 :          c.setAttribute('width', img.height);          c.setAttribute('height', img.width);          canvasContext.rotate(270 * Math.PI / 180);          canvasContext.drawImage(img, -img.width, 0);