眾所周知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è)步驟：
- 移動(dòng)canvas原點(diǎn)
- 旋轉(zhuǎn)canvas
- 插入圖片并移動(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) // 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ì)寫(xiě)旋轉(zhuǎn)搭配圖片的縮放。有寫(xiě)的不好或錯(cuò)誤的地方，望指出
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
