作為web開發(fā)者，我一直在和HTML5 canvas元素打交道。渲染圖片是一個(gè)大的分支，十分重要而且很常用，所以,今天的教程是關(guān)于畫布圖像展示以及如何旋轉(zhuǎn)圖像，說不定是你現(xiàn)在真正想要的好東西。
總的來(lái)說，canvas旋轉(zhuǎn)有兩種方式：中心旋轉(zhuǎn)和參照點(diǎn)旋轉(zhuǎn)。熟練應(yīng)用旋轉(zhuǎn)功能，對(duì)你的開發(fā)作品會(huì)有極大的幫助。
關(guān)于對(duì)象的中心旋轉(zhuǎn)
第一個(gè)類型的旋轉(zhuǎn)，我們要看看是對(duì)其中心旋轉(zhuǎn)一個(gè)對(duì)象。實(shí)現(xiàn)使用畫布元素，這是一個(gè)最簡(jiǎn)單的旋轉(zhuǎn)類型。我們把一只大猩猩的圖片作為素材進(jìn)行試驗(yàn)。
基本的想法是,我們要把帆布按照一個(gè)中心點(diǎn)旋轉(zhuǎn),旋轉(zhuǎn)畫布,然后把畫布回到原來(lái)的位置。如果你有一些經(jīng)驗(yàn)關(guān)于圖形引擎，那么這聽起來(lái)應(yīng)該很熟悉。代碼大概就是這樣：（點(diǎn)擊看效果）
JavaScript Code復(fù)制內(nèi)容到剪貼板
- function onload() {
- var canvas = document.getElementById('c1');
- var ctx1 = canvas.getContext('2d');
- var image1 = new Image();
- image1.onload = function() {
-
- var xpos = canvas.width/2;
- var ypos = canvas.height/2;
- ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2);
- ctx1.save();
- ctx1.translate(xpos, ypos);
- ctx1.rotate(47 * Math.PI / 180);
- ctx1.translate(-xpos, -ypos);
- ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2);
- ctx1.restore();
- }
- image1.src = 'image.png';
- }
注釋已經(jīng)非常詳細(xì)，但我仍舊想提一點(diǎn)：.save()和.restore()。他們的作用是保存旋轉(zhuǎn)之前的畫布，然后旋轉(zhuǎn)后恢復(fù)。有效地避免了和其他渲染沖突，十分關(guān)鍵，許多朋友沒有順利進(jìn)行旋轉(zhuǎn)，大多都是這個(gè)原因。
圍繞某個(gè)點(diǎn)旋轉(zhuǎn)
第二個(gè)類型是圖像圍繞空間的某個(gè)點(diǎn)進(jìn)行旋轉(zhuǎn)，這將變得比較復(fù)雜?？蔀槭裁匆@樣做呢？很多情況下，你需要把對(duì)象參照另一個(gè)對(duì)象旋轉(zhuǎn)，單一的圍繞中心旋轉(zhuǎn)無(wú)法滿足需求。而且后者會(huì)更常用，比如在做網(wǎng)頁(yè)游戲中，經(jīng)常會(huì)用到旋轉(zhuǎn)。
JavaScript Code復(fù)制內(nèi)容到剪貼板
- function onload() {
- var canvas2 = document.getElementById('c2');
- var ctx2 = canvas2.getContext('2d');
-
- var image2 = new Image();
- image2.onload = function() {
-
- var angle = 120 * Math.PI / 180;
- var rx = 300, ry = 200;
- var px = 300, py = 50;
- var radius = ry - py;
- var dx = rx + radius * Math.sin(angle);
- var dy = ry - radius * Math.cos(angle);
- ctx2.drawImage(image2, 300 - image2.width / 2, 50 - image2.height / 2);
- ctx2.beginPath();
- ctx2.arc(300,200,5,0,Math.PI*2,false);
- ctx2.closePath();
- ctx2.fillStyle = 'rgba(0,255,0,0.25)';
- ctx2.fill();
-
- ctx2.save();
- ctx2.translate(dx, dy);
- ctx2.rotate(angle);
- ctx2.translate(-dx, -dy);
- ctx2.drawImage(image2, dx - image2.width / 2, dy - image2.height / 2);
- ctx2.restore();
- }
- image2.src = 'smallimage.png';
- }
代碼簡(jiǎn)潔，作用是把一張圖片按照一個(gè)點(diǎn)旋轉(zhuǎn)了120度，這張圖片更形象。
繪制魔性Logo
這是在度娘上看到了一個(gè)logo，巧妙運(yùn)用了旋轉(zhuǎn)變換，用一個(gè)很簡(jiǎn)單矩形，通過旋轉(zhuǎn)變換，變成了一個(gè)很漂亮的logo。這logo是不是很有魔性？童鞋們動(dòng)動(dòng)腦，嘗試實(shí)現(xiàn)一下它。下面，提供我實(shí)現(xiàn)它的代碼。
JavaScript Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8">
- <title>繪制魔性Logo</title>
- <style>
- body { background: url("./images/bg3.jpg") repeat; }
- #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
- </style>
- </head>
- <body>
- <div id="canvas-warp">
- <canvas id="canvas">
- 你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧??！
- </canvas>
- </div>
-
- <script>
- window.onload = function(){
- var canvas = document.getElementById("canvas");
- canvas.width = 800;
- canvas.height = 600;
- var context = canvas.getContext("2d");
- context.fillStyle = "#FFF";
- context.fillRect(0,0,800,600);
-
- for(var i=1; i<=10; i++){
- context.save();
- context.translate(400,300);
- context.rotate(36 * i * Math.PI / 180);
- context.fillStyle = "rgba(255,0,0,0.25)";
- context.fillRect(0, -200, 200, 200);
- context.restore();
- }
- };
- </script>
- </body>
- </html>
運(yùn)行結(jié)果：
是不是非常的酷？這個(gè)圖形稍微分析一下發(fā)現(xiàn)還是蠻簡(jiǎn)單的，就是讓一個(gè)正放形，以屏幕中點(diǎn)（即初始正方形左下角頂點(diǎn)）為圓心進(jìn)行旋轉(zhuǎn)。
藝術(shù)是不是很美妙？大家一定以及體會(huì)到了Canvas的奇妙，簡(jiǎn)簡(jiǎn)單單的幾行代碼就能實(shí)現(xiàn)無(wú)窮無(wú)盡的效果。只要腦洞夠大，沒有什么是不可以實(shí)現(xiàn)的。所以，揚(yáng)起咱們的藝術(shù)家的旗幟，加快步伐，繼續(xù)前進(jìn)！
