Ch14 旋转变换

    最后一点需要注意的是，Canvas是基于状态的绘制，所以每次旋转都是接着上次旋转的基础上继续旋转，所以在使用图形变换的时候必须搭配save()与restore()方法，一方面重置旋转角度，另一方面重置坐标系原点。

    运行结果：

    这里用for循环绘制了14对正方形，其中蓝色是旋转前的正方形，红色是旋转后的正方形。每次旋转都以正方形左上角顶点为原点进行旋转。每次绘制都被save()与restore()包裹起来，每次旋转前都移动了坐标系。童鞋们可以自己动动手，实践一下，就能体会到旋转变换的奥妙了。

    绘制魔性Logo

    这是在度娘上看到了一个logo，巧妙运用了旋转变换，用一个很简单矩形，通过旋转变换，变成了一个很漂亮的logo。这logo是不是很有魔性？童鞋们动动脑，尝试实现一下它。下面，提供我实现它的代码。

    1. <!DOCTYPE html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>绘制魔性Logo</title>
    6.     <style>
    8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
    9.     </style>
    10. </head>
    11. <div id="canvas-warp">
    12.     <canvas id="canvas">
    13.         你的浏览器居然不支持Canvas？！赶快换一个吧！！
    14.     </canvas>
    15. </div>
    17. <script>
    18.     window.onload = function(){
    19.         var canvas = document.getElementById("canvas");
    20.         canvas.width = 800;
    22.         var context = canvas.getContext("2d");
    23.         context.fillRect(0,0,800,600);
    25.         for(var i=1; i<=10; i++){
    26.             context.save();
    27.             context.translate(400,300);
    28.             context.rotate(36 * i * Math.PI / 180);
    29.             context.fillStyle = "rgba(255,0,0,0.25)";
    30.             context.fillRect(0, -200, 200, 200);
    31.             context.restore();
    32.         }
    33.     };
    34. </script>
    35. </html>

    运行结果：

    魔性Logo

    是不是非常的酷？这个图形稍微分析一下发现还是蛮简单的，就是让一个正放形，以屏幕中点（即初始正方形左下角顶点）为圆心进行旋转。