實例講解利用HTML5 Canvas API操作圖形旋轉的方法

實例講解利用HTML5 Canvas API操作圖形旋轉的方法_html5教學技巧

WBOY

發布： 2016-05-16 15:45:24

原創

1943 人瀏覽過

身為web開發者，我一直在和HTML5 canvas元素打交道。渲染圖片是一個大的分支，十分重要而且很常用，所以,今天的教程是關於畫布圖像展示以及如何旋轉圖像，說不定是你現在真正想要的好東西。

總的來說，canvas旋轉有兩種方式：中心旋轉和參考點旋轉。熟練應用旋轉功能，對你的開發作品會有極大的幫助。

關於物件的中心旋轉
第一個類型的旋轉，我們要看看是對其中心旋轉一個物件。實作使用畫布元素，這是一個最簡單的旋轉類型。我們把一隻大猩猩的圖片當作素材來試驗。
基本的想法是,我們要把帆布按照一個中心點旋轉,旋轉畫布,然後把畫布回到原來的位置。如果你有一些經驗關於圖形引擎，那麼這聽起來應該很熟悉。程式碼大概就是這樣：（點擊看效果）

JavaScript Code複製內容到剪貼簿

function onload() {
var canvas = document.getElementById('c1'
var ctx1 = canvas.getContext('2d'
image1 = new image1.onload = function() {
// regular rotation about center
var xpos = canvas.width/2;
var ypos = canvas.height/2;
ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2); ctx1.save();
//旋轉47度
ctx1.translate(-xpos, -ypos);
ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2); ctx1.restore();
'image.png'
註解已經非常詳細，但我仍舊想提一點：.save()和.restore()。他們的作用是保存旋轉之前的畫布，然後旋轉後恢復。有效地避免了和其他渲染衝突，十分關鍵，許多朋友沒有順利進行旋轉，大多都是這個原因。

圍繞某個點旋轉
第二個類型是圖像圍繞空間的某個點進行旋轉，這將變得比較複雜。可為什麼要這樣做呢？很多情況下，你需要把物件參考另一個物件旋轉，單一的圍繞中心旋轉無法滿足需求。而且後者會比較常用，例如在做網頁遊戲中，常常會用到旋轉。

JavaScript Code複製內容到剪貼簿
1. 函數 onload() {
2. var canvas2 = document.getElementById('c2'
3. var ctx2 = canvas2.getContext('2d' //圍繞點
4. 定期旋轉 var
5. image2 = 新 image2.onload = 函數
6. //在某點周圍定期旋轉
7. var
8. 🎜> var rx = 300， ry = 200；
9. var px = 300， py = 50； var 半徑 = ry - py;
10. /y 位置或半徑 var dx = rx 半徑 * Math.sin (角度);
11. var dy = ry - 半徑 * Math. ctx2.drawImage(image2, 300 - image2.width / 2, 50 - image2.height / 2); ctx2.beginPath();
12. false); ）; ctx2.closePath();
13. 'rgba(0,255,0,0.25)'; ctx2.fill();
14. ctx2.save();
15. ctx2.translate(dx, dy);
16. ctx2.rotate(角度); ctx2.translate(-dx, -dy);
17. ctx2.drawImage(image2, dx - image2.width / 2, dy - image2.height / 2);
18. ctx2.restore(); }
19. image2.src =
20. 'smallimage.png';
21. }