html5 canvas 画图实例——rotate

分类：前端技术 | 标签：html5、canvas | 发布时间：2012-05-20 00:00:00

接口：context.rotate(angle)

功能：按给定的弧度旋转,按顺时针旋转。

说明：rotate 方法旋转的中心始终是canvas 的原点，使

用translate 方法可以改变它。

例子：

效果：

代码：

<canvas id="canvas" height="400"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.fillStyle = "#000"; context.fillRect(0, 0, 400, 400); context.translate(200, 200); for (var i = 1; i < 6; i++) { context.fillStyle = "rgb(255, " + (255 - 51 * i) + ", " + (51 * i)+ ")"; for (var j = 0; j < i * 6; j++) { context.rotate(Math.PI * 2 / (6 * i)); context.fillRect(0, 30 * i, 10, 10); context.beginPath(); context.arc(0, 30 * i, 10, 0, Math.PI * 2, true); context.fill(); } } </script>