我們在微博上(shàng)可(kě)以對圖片進行(xíng)向左轉向右轉等旋轉操作(zuò)，讓用戶可(kě)以從不同的視(shì)角欣賞圖片效果。本文将結合實例為(wèi)您講解如何使用Javascript結合相關技(jì)術(shù)來(lái)實現圖片的旋轉效果。我們使用HTML5的canvas标簽可(kě)對圖片進行(xíng)旋轉操作(zuò)，對于ie6，7，8不支持HTML5的浏覽器(qì)，我們使用IE特有(yǒu)的濾鏡效果來(lái)實現圖片旋轉。

HTML

我們在頁面中放置一張圖片，在圖片的上(shàng)方放置兩個(gè)按鈕，通(tōng)過onclick事件調用rotate()函數(shù)來(lái)控制(zhì)圖片向左向右旋轉。

 向左 向右 



  

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

我們寫了個(gè)自定義函數(shù)rotate（），其中參數(shù)obj表示要旋轉的圖片對象的id，參數(shù)arr表示旋轉方向，固定兩個(gè)值:left(向左)和(hé)right(向右)。我們設置變量n是為(wèi)了記錄上(shàng)下左右四種旋轉狀态，點擊旋轉按鈕時(shí)可(kě)以保證持續的旋轉的狀态，即每次旋轉是在上(shàng)次旋轉操作(zuò)後的基礎上(shàng)再次旋轉。

然後，我們要根據浏覽器(qì)的不同進行(xíng)不同的處理(lǐ)，對于IE系浏覽器(qì)，可(kě)以使用他們特有(yǒu)的濾鏡來(lái)實現旋轉效果，雖然我們不建議使用濾鏡，但(dàn)為(wèi)了兼容IE老版本，我們不得(de)不重操這把舊(jiù)刀。

function rotate(obj,arr){
	...
    //對IE浏覽器(qì)使用濾鏡旋轉
	if(document.all) {
		img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')';
	// 對現代浏覽器(qì)寫入HTML5的元素進行(xíng)旋轉： canvas
	}else{
    	...
    }
}

代碼中，我們使用document.all判斷是否為(wèi)IE浏覽器(qì)，如果是則使用濾鏡，而對于firefox和(hé)chrome這樣的現代浏覽器(qì)，我們使用canvas來(lái)實現旋轉效果。

function rotate(obj,arr){
	...
	// 對現代浏覽器(qì)寫入HTML5的元素進行(xíng)旋轉： 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處于不同的狀态（上(shàng)下左右四個(gè)方向）時(shí)，使用canvas重新對圖像進行(xíng)繪制(zhì)。關于canvas标簽的使用，大(dà)家(jiā)可(kě)以參照下本站(zhàn)文章：HTML5之畫(huà)布Canvas。

當然，圖片的旋轉效果實現還(hái)有(yǒu)一種解決方案，繞開(kāi)html5，針對各不同的浏覽器(qì)，比如firefox下面可(kě)以用-moz-transform: rotate(); webkit可(kě)以用-webkit-transform: rotate(); 但(dàn)這并不如html5的canvas實現的效果好。