旋转变换rotate()

同画圆弧一样,这里的rotate(deg)传入的参数是弧度,不是角度。同时需要注意的是,这个的旋转是以坐标系的原点(0,0)为圆心进行的顺时针旋转。所以,在使用rotate()之前,通常需要配合使用translate()平移坐标系,确定旋转的圆心。即,旋转变换通常搭配平移变换使用的。

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

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>旋转变换</title>
  6. <style>
  7. body { background: url("./images/bg3.jpg") repeat; }
  8. #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
  9. </style>
  10. </head>
  11. <body>
  12. <div id="canvas-warp">
  13. <canvas id="canvas">
  14. 你的浏览器居然不支持Canvas?!赶快换一个吧!!
  15. </canvas>
  16. </div>
  17. <script>
  18. window.onload = function(){
  19. var canvas = document.getElementById("canvas");
  20. canvas.width = 800;
  21. canvas.height = 600;
  22. var context = canvas.getContext("2d");
  23. context.fillStyle = "#FFF";
  24. context.fillRect(0,0,800,600);
  25. for(var i = 0; i <= 12; i++){
  26. context.save();
  27. context.translate(70 + i * 50, 50 + i * 40);
  28. context.fillStyle = "#00AAAA";
  29. context.fillRect(0,0,20,20);
  30. context.restore();
  31. context.save();
  32. context.translate(70 + i * 50, 50 + i * 40);
  33. context.rotate(i * 30 * Math.PI / 180);
  34. context.fillStyle = "red";
  35. context.fillRect(0,0,20,20);
  36. context.restore();
  37. }
  38. };
  39. </script>
  40. </body>
  41. </html>

演示 14-1

运行结果:

13.旋转变换 - 图1

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

绘制魔性Logo

13.旋转变换 - 图2

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

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>绘制魔性Logo</title>
  6. <style>
  7. body { background: url("./images/bg3.jpg") repeat; }
  8. #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
  9. </style>
  10. </head>
  11. <body>
  12. <div id="canvas-warp">
  13. <canvas id="canvas">
  14. 你的浏览器居然不支持Canvas?!赶快换一个吧!!
  15. </canvas>
  16. </div>
  17. <script>
  18. window.onload = function(){
  19. var canvas = document.getElementById("canvas");
  20. canvas.width = 800;
  21. canvas.height = 600;
  22. var context = canvas.getContext("2d");
  23. context.fillStyle = "#FFF";
  24. 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. </body>
  36. </html>

演示 14-2

运行结果:

13.旋转变换 - 图3

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

艺术是不是很美妙?大家一定以及体会到了Canvas的奇妙,简简单单的几行代码就能实现无穷无尽的效果。只要脑洞够大,没有什么是不可以实现的。所以,扬起咱们的艺术家的旗帜,加快步伐,继续前进!😋