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

那問(wèn)題來(lái)了，我要怎么旋轉(zhuǎn)圖片

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

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

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

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

在這里我們可以看到我剛剛所說(shuō)的虛擬的畫(huà)布旋轉(zhuǎn)45°后再向虛擬的畫(huà)布內(nèi)插入圖片，然后真實(shí)畫(huà)布所呈現(xiàn)的就是虛擬畫(huà)布和真實(shí)畫(huà)布相交的部分了。這里可能不太好理解，大家仔細(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()的使用方法了。

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

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

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

ctx.drawImage(img, x, y)：這個(gè)方法上面用過(guò)了，不過(guò)里面是有三個(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è)步驟分開(kāi)看看（圖片的寬高為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)過(guò)一系列操作后，canvas的設(shè)置會(huì)亂掉。每操作一次完成后都把設(shè)置恢復(fù)回原樣就好了。

var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext("2d")ctx.translate(200, 150)         // 1ctx.rotate(-Math.PI / 4)        // 2ctx.drawImage(img, -200, -150)// 恢復(fù)設(shè)置（恢復(fù)的步驟要跟你修改的步驟向反）ctx.rotate(Math.PI / 4)         // 1ctx.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ì)寫(xiě)旋轉(zhuǎn)搭配圖片的縮放。有寫(xiě)的不好或錯(cuò)誤的地方，望指出

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。