Javascript與HTML5的canvas實現圖片旋轉效果是怎樣的

Javascript與HTML5的canvas實現圖片旋轉效果是怎樣的，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

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

HTML

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

<p id="tool">     <a href="#" id="arr_left" onclick="rotate('myimg','left')">向左</a>     <a href="#" id="arr_right" onclick="rotate('myimg','right')">向右</a> </p> <p id="img">     <img src="demo.jpg" width="460" height="305" alt="" id="myimg" /> </p>

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)? 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老版本，我們不得不重操這把舊刀。

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重新對圖像進行繪制。關于canvas標簽的使用，大家可以參照下本站文章：HTML5之畫布Canvas。

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

看完上述內容，你們掌握Javascript與HTML5的canvas實現圖片旋轉效果是怎樣的的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！