Javascript与HTML5的canvas实现图片旋转效果

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

HTML

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

　　

 
     向左 
     向右 
 
 
      
 

javascript

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



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

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

　　代码中，我们创建canvas元素对象，并将图片赋予canvas对象，当变量n处于不同的状态（上下左右四个方向）时，使用canvas重新对图像进行绘制。关于canvas标签的使用，大家可以参照下本站文章：HTML5之画布Canvas。



　　当然，图片的旋转效果实现还有一种解决方案，绕开html5，针对各不同的浏览器，比如firefox下面可以用-moz-transform: rotate(); webkit可以用-webkit-transform: rotate(); 但这并不如html5的canvas实现的效果好。

//*****************
//*****************
// 站长寒剑:代码是copy来的，有些地方是可以优化的，为了让大家能够看懂下面的代码，所以没有进行优化简写
//*****************
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);
 //对IE浏览器使用滤镜旋转
  if(document.all) {
    img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')';
    //HACK FOR MSIE 8
   switch(n){
      case 0:
       img.parentNode.style.height = img.height;
       break;
      case 1:
       img.parentNode.style.height = img.width;
        break;
      case 2:
       img.parentNode.style.height = img.height;
       break;
      case 3:
       img.parentNode.style.height = img.width;
        break;
    }
 // 对现代浏览器写入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');
   c.setAttribute('width', img.width);
   c.setAttribute('height', img.height);
       
    switch(n) {
     default :
     case 0 :
        canvasContext.rotate(0 * Math.PI / 180);
        canvasContext.drawImage(img, 0, 0);
       break;
      case 1 :
        canvasContext.rotate(90 * Math.PI / 180);
       canvasContext.drawImage(img, 0, -img.height);
       break;
      case 2 :
        canvasContext.rotate(180 * Math.PI / 180);
        canvasContext.drawImage(img, -img.width, -img.height);
        break;
      case 3 :
        canvasContext.rotate(270 * Math.PI / 180);
        canvasContext.drawImage(img, -img.width, 0);
        break;
    };
  }
}

　

欢迎转载，转载请保留链接: https://www.phpzu.com/article/2014/08/10/544.html