同畫圓弧一樣，這里的rotate(deg)傳入的參數(shù)是弧度，不是角度。同時(shí)需要注意的是，這個(gè)的旋轉(zhuǎn)是以坐標(biāo)系的原點(diǎn)（0，0）為圓心進(jìn)行的順時(shí)針旋轉(zhuǎn)。所以，在使用rotate()之前，通常需要配合使用translate()平移坐標(biāo)系，確定旋轉(zhuǎn)的圓心。即，旋轉(zhuǎn)變換通常搭配平移變換使用的。

最后一點(diǎn)需要注意的是，Canvas是基于狀態(tài)的繪制，所以每次旋轉(zhuǎn)都是接著上次旋轉(zhuǎn)的基礎(chǔ)上繼續(xù)旋轉(zhuǎn)，所以在使用圖形變換的時(shí)候必須搭配save()與restore()方法，一方面重置旋轉(zhuǎn)角度，另一方面重置坐標(biāo)系原點(diǎn)。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>旋轉(zhuǎn)變換</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 = 0; i <= 12; i++){
            context.save();
            context.translate(70 + i * 50, 50 + i * 40);
            context.fillStyle = "#00AAAA";
            context.fillRect(0,0,20,20);
            context.restore();

            context.save();
            context.translate(70 + i * 50, 50 + i * 40);
            context.rotate(i * 30 * Math.PI / 180);
            context.fillStyle = "red";
            context.fillRect(0,0,20,20);
            context.restore();
        }

    };
</script>
</body>
</html>

演示 14-1

運(yùn)行結(jié)果：

旋轉(zhuǎn)變換

這里用for循環(huán)繪制了14對(duì)正方形，其中藍(lán)色是旋轉(zhuǎn)前的正方形，紅色是旋轉(zhuǎn)后的正方形。每次旋轉(zhuǎn)都以正方形左上角頂點(diǎn)為原點(diǎn)進(jìn)行旋轉(zhuǎn)。每次繪制都被save()與restore()包裹起來，每次旋轉(zhuǎn)前都移動(dòng)了坐標(biāo)系。童鞋們可以自己動(dòng)動(dòng)手，實(shí)踐一下，就能體會(huì)到旋轉(zhuǎn)變換的奧妙了。

繪制魔性Logo

魔性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)它的代碼。

<!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>

演示 14-2

運(yùn)行結(jié)果：

魔性Logo

是不是非常的酷？這個(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)無窮無盡的效果。只要腦洞夠大，沒有什么是不可以實(shí)現(xiàn)的。所以，揚(yáng)起咱們的藝術(shù)家的旗幟，加快步伐，繼續(xù)前進(jìn)！

上一篇：Ch9 繪制標(biāo)準(zhǔn)圓弧下一篇：Ch16 矩陣變換

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

Ch14 旋轉(zhuǎn)變換

旋轉(zhuǎn)變換rotate()

繪制魔性Logo

旋轉(zhuǎn)變換`rotate()`