本文主要介紹了htm5l 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,再就是插入圖片時將圖片往左上角平移圖片自身的一半。 這裡分別有三個步驟:
下面把這三個步驟分開看看(圖片的寬高為400和300)
移動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)旋轉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)插入圖片並移動
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相關推薦:
以上是html5 Canvas實現圖片旋轉的詳細內容。更多資訊請關注PHP中文網其他相關文章!