html5 Canvas實(shí)現(xiàn)圖片旋轉(zhuǎn)的示例

眾所周知canvas是位圖，你可以在里面渲染你要的東西，不過你只能操作canvas的屬性來進(jìn)行編輯。就是說你并不能操作畫進(jìn)canvas的東西，例如我在canvas里添加一幅畫，我現(xiàn)在想將那幅畫移動(dòng)10px，我們并不能直接操作那幅畫，因?yàn)槲覀兏精@取不到那幅畫的任何信息。我們永遠(yuǎn)只能獲取到的是canvas對(duì)象。

那問題來了，我要怎么旋轉(zhuǎn)圖片

其實(shí)canvas是提供了各種各樣的接口去控制畫布的，旋轉(zhuǎn)有rotate()方法。

其實(shí)這里的旋轉(zhuǎn)并不是真的把這個(gè)畫布旋轉(zhuǎn)了，例如我ctx.rotate(Math.PI/2)旋轉(zhuǎn)90°了。并不是說我們?cè)陧撁嫔暇蜁?huì)看到canvas旋轉(zhuǎn)了90°。我們可以理解為其實(shí)canvas是有兩個(gè)部分組成的，一個(gè)是肉眼看得到的畫布，一個(gè)是用于操作的虛擬畫布，我們所有在虛擬畫布上的動(dòng)作都會(huì)映射到真實(shí)畫布中去。

這樣說可能很難理解，下面用圖來解釋一波。首先介紹一下rotate()方法先，它可以旋轉(zhuǎn)畫布，旋轉(zhuǎn)點(diǎn)畫布的原點(diǎn)，而畫布的原點(diǎn)默認(rèn)是左上角。

下面在給大家看一下旋轉(zhuǎn)45°所呈現(xiàn)的效果：

在這里我們可以看到我剛剛所說的虛擬的畫布旋轉(zhuǎn)45°后再向虛擬的畫布內(nèi)插入圖片，然后真實(shí)畫布所呈現(xiàn)的就是虛擬畫布和真實(shí)畫布相交的部分了。這里可能不太好理解，大家仔細(xì)想想。

兩張圖的代碼是這樣的：

// 未旋轉(zhuǎn)
var img = document.getElementById('img')
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext("2d")
ctx.drawImage(img, 0, 0)
// 逆時(shí)針旋轉(zhuǎn)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()的使用方法了。

下面就來說說怎么實(shí)現(xiàn)再圖片中心旋轉(zhuǎn)

再說之前向給大家了解一下canvas的另外兩個(gè)方法的用法：

ctx.translate(x, y): 這個(gè)方法是可以移動(dòng)畫布原點(diǎn)的方法，參數(shù)分別是x，y；

ctx.drawImage(img, x, y)：這個(gè)方法上面用過了，不過里面是有三個(gè)參數(shù)的，第一個(gè)是要插入的圖片dom，后面兩個(gè)x，y分別為插入圖片時(shí)對(duì)img的位置進(jìn)行修改。

從圖可以看出，要想實(shí)現(xiàn)圍繞圖片中心旋轉(zhuǎn)45°，就得把canvas的原點(diǎn)移動(dòng)到這張圖的中心，再旋轉(zhuǎn)canvas，再就是插入圖片時(shí)將圖片往左上角平移圖片自身的一半。

這里分別有三個(gè)步驟：

1. 移動(dòng)canvas原點(diǎn)
2. 旋轉(zhuǎn)canvas
3. 插入圖片并移動(dòng)

下面把這三個(gè)步驟分開看看（圖片的寬高為400和300）

移動(dòng)canvas原點(diǎn)

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

旋轉(zhuǎn)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)

插入圖片并移動(dòng)

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:大家再做完一系列動(dòng)作后一定要將canvas的原點(diǎn)，旋轉(zhuǎn)復(fù)原。不然再經(jīng)過一系列操作后，canvas的設(shè)置會(huì)亂掉。每操作一次完成后都把設(shè)置恢復(fù)回原樣就好了。

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)
// 恢復(fù)設(shè)置（恢復(fù)的步驟要跟你修改的步驟向反）
ctx.rotate(Math.PI / 4)         // 1
ctx.translate(-200, -150)       // 2
// 之后canvas的原點(diǎn)又回到左上角，旋轉(zhuǎn)角度為0
// 其它操作...

還有一點(diǎn)要注意的，我剛剛示范的是圖片相對(duì)canvas x軸y軸為0所示范的例子，如果不為0的情況下，只需在移動(dòng)原點(diǎn)的時(shí)候ctx.translate(200+x, 150+y)。這里的200和150是該圖片的寬高的一半，x，y就是圖片相對(duì)canvas的x，y

這篇文章講的只是在圖片中心旋轉(zhuǎn)，之后我會(huì)寫旋轉(zhuǎn)搭配圖片的縮放。有寫的不好或錯(cuò)誤的地方，望指出

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。