Canvas-圖片旋轉

Canvas-圖片旋轉

衆所周知canvas是位圖，你能夠在裏面渲染你要的東西，不過你只能操做canvas的屬性來進行編輯。就是說你並不能操做畫進canvas的東西，例如我在canvas裏添加一幅畫，我如今想將那幅畫移動10px，咱們並不能直接操做那幅畫，由於咱們根本獲取不到那幅畫的任何信息。咱們永遠只能獲取到的是canvas對象。

---

• 那問題來了，我要怎麼旋轉圖片

  其實canvas是提供了各類各樣的接口去控制畫布的，旋轉有rotate()方法。
  其實這裏的旋轉並非真的把這個畫布旋轉了，例如我ctx.rotate(Math.PI/2)旋轉90°了。並非說咱們在頁面上就會看到canvas旋轉了90°。咱們能夠理解爲其實canvas是有兩個部分組成的，一個是肉眼看獲得的畫布，一個是用於操做的虛擬畫布，咱們全部在虛擬畫布上的動做都會映射到真實畫布中去。
  這樣說可能很難理解，下面用圖來解釋一波。首先介紹一下rotate()方法先，它能夠旋轉畫布，旋轉點畫布的原點，而畫布的原點默認是左上角。

下面在給你們看一下旋轉45°所呈現的效果：

在這裏咱們能夠看到我剛剛所說的虛擬的畫布旋轉45°後再向虛擬的畫布內插入圖片，而後真實畫布所呈現的就是虛擬畫布和真實畫布相交的部分了。這裏可能不太好理解，你們仔細想一想。
兩張圖的代碼是這樣的：

// 未旋轉
var img = document.getElementById('img')
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext("2d")
ctx.drawImage(img, 0, 0)
// 逆時針旋轉45°
var img = document.getElementById('img')
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext("2d")
ctx.rotate(-Math.PI / 4);
ctx.drawImage(img, 0, 0)

看到這裏我想你們基本知道rotate()的使用方法了。

下面就來講說怎麼實現再圖片中心旋轉

再說以前向給你們瞭解一下canvas的另外兩個方法的用法：

• ctx.translate(x, y): 這個方法是能夠移動畫布原點的方法，參數分別是x，y；

• ctx.drawImage(img, x, y)：這個方法上面用過了，不過裏面是有三個參數的，第一個是要插入的圖片dom，後面兩個x，y分別爲插入圖片時對img的位置進行修改。

從圖能夠看出，要想實現圍繞圖片中心旋轉45°，就得把canvas的原點移動到這張圖的中心，再旋轉canvas，再就是插入圖片時將圖片往左上角平移圖片自身的一半。
這裏分別有三個步驟：

1. 移動canvas原點
2. 旋轉canvas
3. 插入圖片並移動

下面把這三個步驟分開看看（圖片的寬高爲400和300）

1. 移動canvas原點

var img = document.getElementById('img')
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext("2d")
ctx.translate(200, 150)
ctx.drawImage(img, 0, 0)

1. 旋轉canvas

var img = document.getElementById('img')
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext("2d")
ctx.translate(200, 150)
ctx.rotate(-Math.PI / 4)
ctx.drawImage(img, 0, 0)

1. 插入圖片並移動

var img = document.getElementById('img')
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext("2d")
ctx.translate(200, 150)
ctx.rotate(-Math.PI / 4)
ctx.drawImage(img, -200, -150)

這樣就大功告成了

---

• ps:你們再作完一系列動做後必定要將canvas的原點，旋轉復原。否則再通過一系列操做後，canvas的設置會亂掉。每操做一次完成後都把設置恢復回原樣就行了。

var img = document.getElementById('img')
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext("2d")
ctx.translate(200, 150)         // 1
ctx.rotate(-Math.PI / 4)        // 2
ctx.drawImage(img, -200, -150)
// 恢復設置（恢復的步驟要跟你修改的步驟向反）
ctx.rotate(Math.PI / 4)         // 1
ctx.translate(-200, -150)       // 2
// 以後canvas的原點又回到左上角，旋轉角度爲0
// 其它操做...

還有一點要注意的，我剛剛示範的是圖片相對canvas x軸y軸爲0所示範的例子，若是不爲0的狀況下，只需在移動原點的時候ctx.translate(200+x, 150+y)。這裏的200和150是該圖片的寬高的一半，x，y就是圖片相對canvas的x，y。

這篇文章講的只是在圖片中心旋轉，canvas-圖片縮放教程。有寫的很差或錯誤的地方，望指出