Javascript與HTML5的canvas實現(xiàn)圖片旋轉(zhuǎn)效果是怎樣的，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。
我們在微博上可以對圖片進行向左轉(zhuǎn)向右轉(zhuǎn)等旋轉(zhuǎn)操作，讓用戶可以從不同的視角欣賞圖片效果。本文將結(jié)合實例為您講解如何使用Javascript結(jié)合相關(guān)技術(shù)來實現(xiàn)圖片的旋轉(zhuǎn)效果。我們使用HTML5的canvas標(biāo)簽可對圖片進行旋轉(zhuǎn)操作，對于ie6，7，8不支持HTML5的瀏覽器，我們使用IE特有的濾鏡效果來實現(xiàn)...
我們在頁面中放置一張圖片，在圖片的上方放置兩個按鈕，通過onclick事件調(diào)用rotate()函數(shù)來控制圖片向左向右旋轉(zhuǎn)。
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);
...
}
我們寫了個自定義函數(shù)rotate（），其中參數(shù)obj表示要旋轉(zhuǎn)的圖片對象的id，參數(shù)arr表示旋轉(zhuǎn)方向，固定兩個值:left(向左)和right(向右)。我們設(shè)置變量n是為了記錄上下左右四種旋轉(zhuǎn)狀態(tài)，點擊旋轉(zhuǎn)按鈕時可以保證持續(xù)的旋轉(zhuǎn)的狀態(tài)，即每次旋轉(zhuǎn)是在上次旋轉(zhuǎn)操作后的基礎(chǔ)上再次旋轉(zhuǎn)。
然后，我們要根據(jù)瀏覽器的不同進行不同的處理，對于IE系瀏覽器，可以使用他們特有的濾鏡來實現(xiàn)旋轉(zhuǎn)效果，雖然我們不建議使用濾鏡，但為了兼容IE老版本，我們不得不重操這把舊刀。
function rotate(obj,arr){
...
//對IE瀏覽器使用濾鏡旋轉(zhuǎn)
if(document.all) {
img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')';
// 對現(xiàn)代瀏覽器寫入HTML5的元素進行旋轉(zhuǎn)： canvas
}else{
...
}
}
代碼中，我們使用document.all判斷是否為IE瀏覽器，如果是則使用濾鏡，而對于firefox和chrome這樣的現(xiàn)代瀏覽器，我們使用canvas來實現(xiàn)旋轉(zhuǎn)效果。
function rotate(obj,arr){
...
// 對現(xiàn)代瀏覽器寫入HTML5的元素進行旋轉(zhuǎn)： 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;
};
}
}
代碼中，我們創(chuàng)建canvas元素對象，并將圖片賦予canvas對象，當(dāng)變量n處于不同的狀態(tài)（上下左右四個方向）時，使用canvas重新對圖像進行繪制。關(guān)于canvas標(biāo)簽的使用，大家可以參照下本站文章：HTML5之畫布Canvas。
當(dāng)然，圖片的旋轉(zhuǎn)效果實現(xiàn)還有一種解決方案，繞開html5，針對各不同的瀏覽器，比如firefox下面可以用-moz-transform: rotate(); webkit可以用-webkit-transform: rotate(); 但這并不如html5的canvas實現(xiàn)的效果好。
看完上述內(nèi)容，你們掌握J(rèn)avascript與HTML5的canvas實現(xiàn)圖片旋轉(zhuǎn)效果是怎樣的的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
重慶分公司
重慶分公司
