IE下及标准浏览器下的图片旋转（二）—— Canvas（1）
?
??????文章過長，一篇無法保存。
??????IE下及標準瀏覽器下的圖片旋轉（一）——濾鏡，CSS3
?
3.?canvas
?
??????canvas 是html5中的新標簽，使用canvas之前我們先看下它的定義：<canvas>?標簽只是圖形容器，您必須使用腳本來繪制圖形。這個標 簽是用來繪圖的，包括2d和3d，擁有很多方法，因為我們只是拿來實現圖片的旋轉，所以只需要了解其中的3個方法即可，關于canvas的詳細使用會寫在 以后的篇幅中。
?
??????先講下canvas實現旋轉圖片的原理：canvas標簽相當于創建一個畫布，不僅可以在上面畫圖，還可以插入圖片，當我們在canvas中插入了圖片，并使用其提供的旋轉方法對畫布旋轉，即可實現旋轉圖片的目的。
?
??????canvas畫布旋轉式圍繞圓點進行的，示例如圖：
?
??????假 定藍色方塊是canvas標簽，當我們對其內容進行旋轉時，是旋轉的整個畫布，但是canvas本身的位置和大小是不會發生變化的，當內容旋轉后如果超出 了畫布，就會被遮擋住，默認旋轉的原點是00坐標，也就是畫布的左上角，并且，無論怎樣旋轉，它的X軸和Y軸都不會改變，即使我們旋轉90度或者180 度。會ps的同學可以參考圖層旋轉，把中心點定在左上角即可。
?
??????來看個形象店的圖示：
?
?
??????默認旋轉90度后，內容全部超出畫布，將不會顯示，X軸和Y軸不變。如下圖所示：
?
??????
?
?
????先來個示例：
????javascript：
????$(function?()?{
????????var?canvas?=?document.getElementById("img_box").getContext('2d');?
????????var?img?=?new?Image();?
????????img.onload?=?function(){?
??????????????canvas.drawImage(img,0,0);?
????????}?
????????img.src?=?'12.jpg';?
????})
?
????css：
????#img_box?{?background:?#e5e5e5;?}
?
????html：
????<canvas?id="img_box"?width="400px"?height="200px"></canvas>
?
????效果如圖：
?
??????稍微講解下代碼：
??????(1)?var?canvas?=?document.getElementById("img_box").getContext('2d');?
??????獲取canvas標簽并使用2D畫圖模式
?
??????(2)?var?img?=?new?Image();?
??????創建一個圖片對象
?
??????(3)?img.onload?=?function(){?}?
??????圖片加載完后執行函數
?
??????(4)?canvas.drawImage(img,0,0);?
??????drawImage()方法允許在canvas中插入其他圖像。參數可以使3個（位移）5個（位移，縮放）或9個（位移，縮放，裁剪）。我們用3個就夠了，第一個參數是圖片地址，第二個是X軸位移，第三個是Y軸位移，我們讓圖片和原點（0,0）對齊就可以了。
?
??????如果我們把canvas的大小設置的和圖片大小一樣的話，那么久相當于圖片充滿了canvas畫布，上例中我們的圖片是120*90，我們把canvas標簽的大小也設成120*90就會成這樣：
?
?
??????可以看到沒有了灰色區域，只有圖片。
?
??????如果我們要對它旋轉就需要用到rotate()方法，rotate(Math.PI)代表順時針旋轉180度，也即是說Math.PI=180度，-Math.PI=-180度，Math.PI/2=90度，以此類推。我們以旋轉45度為例：
?
????javascript：
????$(function?()?{
????????var?canvas?=?document.getElementById("img_box").getContext('2d');?;
????????var?img?=?new?Image();?
????????img.onload?=?function(){?
??????????????canvas.drawImage(img,0,0);?
????????}?
????????canvas.rotate(Math.PI/4);
????????img.src?=?'12.jpg';?
????})
?
????css：
????#img_box?{?background:?#e5e5e5;?}
?
????html：
????<canvas?id="img_box"?width="120px"?height="90px"></canvas>
?
????效果如圖：
?
?
??????我們可以看到使用rotate()方法方法旋轉后，就如前面的原理如所示，canvas標簽大小不變，內容會圍繞原點（0,0）旋轉整個畫布。超出的部分會隱藏掉。由此我們可以推斷，當旋轉90度時，圖片會完全看不到。我們需要把圖片再拉回來，并且改變canvas標簽的大小為圖片旋轉后的大小，也就是寬高互換。
?
??????因此我們需要使用translate()方法重新設定原點位置。以下以90度旋轉為例，如有不明白translate()取值的同學，認真揣摩上面關于原點，XY軸的原理圖，XY軸不變。
?
????javascript：
????$(function?()?{
????????var?canvas?=?document.getElementById("img_box").getContext('2d');?;
????????var?img?=?new?Image();?
????????img.onload?=?function(){?
??????????????canvas.drawImage(img,0,0);?
????????}?
????????canvas.rotate(Math.PI/2);
????????canvas.translate(0,-90);
????????img.src?=?'12.jpg';?
????})
?
????css：
????#img_box?{?background:?#e5e5e5;?}
?
????html：
????<canvas?id="img_box"?width="90px"?height="120px"></canvas>
?
????效果如圖：
?
??????如果我們需要多次旋轉，則需要在每次旋轉前將原點復位到原始狀態。例如我們進行90度旋轉：
??????canvas.rotate(Math.PI/2);
??????canvas.translate(0,-90);
?
??????當我們再次旋轉90度時，需要先復位原點，再旋轉：
??????canvas.translate(0,90);
??????canvas.rotate(Math.PI/2);
??????canvas.translate(-120,-90);
?
??????完整的順時針旋轉360度代碼：
??????canvas.rotate(Math.PI/2);???//順時針旋轉90度
??????canvas.translate(0,-90);???//位移，顯示在畫布上
??????canvas.translate(0,90);???//復位原點（0,0）
??????canvas.rotate(Math.PI/2);???//再次旋轉90度，此時即是180度
??????canvas.translate(-120,-90);???//位移
??????canvas.translate(120,90);???//復位原點
??????canvas.rotate(Math.PI/2);???//繼續旋轉90度，此時270度
??????canvas.translate(-120,0);???//位移
??????canvas.translate(120,0);???//復位原點
??????canvas.rotate(Math.PI/2);??//繼續旋轉90度，此時360度，無需位移
?
??????當然，我們也可以先改變中心點，然后旋轉畫布，最后再插入圖片，以旋轉90度為例：
?
??????translate(90,0);canvas.rotate(Math.PI/2);我們看到如果這樣的話，translate的 數值與之前是不同的，原因在于，之前先旋轉，中心點是原點，旋轉后圖片超出被隱藏，我們需要把中心點移動旋轉后的視覺位置，在視覺上是向右向下移動（正 數），實際上相對于旋轉后的畫布是向左向上移動（負數），而先旋轉畫布的話，我們要提前算好旋轉后這個點的位置，然后向右向下移動，因為并未旋轉，所以相 對于原點向右向下移動與視覺上的移動方向一致，所以是正數。不明白的同學好好體會體會，看看上面的示例圖，自己拿個方形的東西轉轉，呵呵。
?
??????如果每次旋轉后都需要手動復位原點，這樣也有點太復雜了，算起來有點暈，其實大可不必這樣，因為canvas給我們提供了一種復位方法save()和restore()。
?
?????save()用來保存canvas的狀態（注意是canvas畫布，而不是我們畫的圖或者對圖片等的操作），restore()用來恢復。restore()總是會尋找離它最近的save()恢復，并且restore()的個數不能多于save()的個數，這個不難理解，你保存10次恢復11次，肯定會出錯嘛。
?
????我們看個示例：
????javascript：
????window.onload?=?function(){
????????var?canvas?=?document.getElementById("cv");
????????canvas.height?=?250;
????????canvas.width?=?400;
????????var?context?=?canvas.getContext("2d");
????????context.save();
????????var?img1?=?new?Image();?
????????img1.onload?=?function(){?
????????????context.translate(90,0);
????????????context.rotate(Math.PI/2);
????????????context.drawImage(img1,0,0);?
????????????context.restore();??????
????????}?
????????img1.src?=?'12.jpg';?
????????
????????
????????var?img2?=?new?Image();?
????????img2.onload?=?function(){?
????????????context.drawImage(img2,0,0);???
????????}?
????????img2.src?=?'13.jpg';?????
????};
?
????css：
????#cv?{?background:?#e5e5e5;?}
?
????html：
????<canvas?id="cv"></canvas>
?
????效果如圖：
?
?
??????如果我們去掉?img1.onload?=?function(){?}中的context.restore();??就會變成這樣：
?
?
??????我 們看到，img1旋轉了90度，不加restore()，img2也是旋轉90度，加上后img2不受影響，為什么呢？我們往上看，創建canvas畫布 后，我們就進行了一次save()，這時我們并沒有對canvas畫布做任何操作，當img1進行旋轉后，畫布就成為了旋轉90度，如果我們直接加入 img2，那么img2也是在畫布旋轉90的狀態下插入的，如果我們使用restore()，那么canvas畫布就會恢復到上一次save()狀態（注意，是canvas畫布恢復，我們對img1進行的操作不會受影響），這時我們再加入img2，就不會受影響了，這是個很關鍵的使用方法，復雜的畫圖都要用到多次save()和restore()。
?
??????文章過長，一篇無法保存
??????IE下及標準瀏覽器下的圖片旋轉（二）——?Canvas（2）
?
轉載于:https://www.cnblogs.com/k13web/p/4139482.html
總結
以上是生活随笔為你收集整理的IE下及标准浏览器下的图片旋转（二）—— Canvas（1）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ubuntu 串口转usb使用
- 下一篇： 可伸缩搜索框 旋转实现loading