javascript結合canvas實現圖片旋轉效果_javascript技巧-js教程-PHP中文網

javascript結合canvas實現圖片旋轉效果_javascript技巧

WBOY

發布： 2016-05-16 16:01:33

原創

1323 人瀏覽過

我們在微博上可以對圖片進行向左轉向右轉等旋轉操作，讓使用者可以從不同的視角欣賞圖片效果。本文將結合實例為您說明如何使用Javascript結合相關技術來實現圖片的旋轉效果。我們使用HTML5的canvas標籤可對圖片進行旋轉操作，對於ie6，7，8不支援HTML5的瀏覽器，我們使用IE特有的濾鏡效果來實現圖片旋轉。

HTML

我們在頁面中放置一張圖片，在圖片的上方放置兩個按鈕，透過onclick事件呼叫rotate()函數來控制圖片向左向右旋轉。

<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

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)&#63; n=3:n--; 
  }else if(arr=='right'){ 
    (n==3)&#63; n=0:n++; 
  } 
  img.setAttribute('step',n); 
  ... 
}

登入後複製

我們寫了個自訂函數rotate（），其中參數obj表示要旋轉的圖片物件的id，參數arr表示旋轉方向，固定兩個值:left(向左)和right(向右)。我們設定變數n是為了記錄上下左右四種旋轉狀態，點擊旋轉按鈕時可以保證持續的旋轉的狀態，即每次旋轉是在上次旋轉操作後的基礎上再次旋轉。

然後，我們要根據瀏覽器的不同進行不同的處理，對於IE系瀏覽器，可以使用他們特有的濾鏡來實現旋轉效果，雖然我們不建議使用濾鏡，但為了兼容IE老版本，我們不得不重操這把舊刀。

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來實現旋轉效果。

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); 
        break; 
    }; 
  } 
}

登入後複製

程式碼中，我們建立canvas元素對象，並將圖片賦予canvas對象，當變數n處於不同的狀態（上下左右四個方向）時，使用canvas重新對圖像進行繪製。

當然，圖片的旋轉效果實現還有一種解決方案，繞開html5，針對各不同的瀏覽器，例如firefox下面可以用-moz-transform: rotate(); webkit可以用-webkit-transform: rotate (); 但這並不如html5的canvas所達成的效果好。

以上所述就是本文給大家分享的全部內容了，希望大家能夠喜歡。