Ch14 旋转变换
旋转变换rotate()
同画圆弧一样，这里的rotate(deg)传入的参数是弧度，不是角度。同时需要注意的是，这个的旋转是以坐标系的原点（0，0）为圆心进行的顺时针旋转。所以，在使用rotate()之前，通常需要配合使用translate()平移坐标系，确定旋转的圆心。即，旋转变换通常搭配平移变换使用的。
最后一点需要注意的是，Canvas是基于状态的绘制，所以每次旋转都是接着上次旋转的基础上继续旋转，所以在使用图形变换的时候必须搭配save()与restore()方法，一方面重置旋转角度，另一方面重置坐标系原点。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>旋转变换</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？！赶快换一个吧！！
</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>
运行结果：
这里用for循环绘制了14对正方形，其中蓝色是旋转前的正方形，红色是旋转后的正方形。每次旋转都以正方形左上角顶点为原点进行旋转。每次绘制都被save()与restore()包裹起来，每次旋转前都移动了坐标系。童鞋们可以自己动动手，实践一下，就能体会到旋转变换的奥妙了。
绘制魔性Logo
这是在度娘上看到了一个logo，巧妙运用了旋转变换，用一个很简单矩形，通过旋转变换，变成了一个很漂亮的logo。这logo是不是很有魔性？童鞋们动动脑，尝试实现一下它。下面，提供我实现它的代码。
<!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？！赶快换一个吧！！
</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>
运行结果：
是不是非常的酷？这个图形稍微分析一下发现还是蛮简单的，就是让一个正放形，以屏幕中点（即初始正方形左下角顶点）为圆心进行旋转。
艺术是不是很美妙？大家一定以及体会到了Canvas的奇妙，简简单单的几行代码就能实现无穷无尽的效果。只要脑洞够大，没有什么是不可以实现的。所以，扬起咱们的艺术家的旗帜，加快步伐，继续前进！😋