<!DOCTYPE HTML>
<html>
<head>
<title>rotate</title>
<script type="text/javascript">
function draw(){
var cxt = document.getElementById("myCanvas").getContext("2d");
cxt.translate(75,75);
for (i=1; i<6; i++)
{
cxt.save();
cxt.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';
for (j=0; j<i*6; j++)
{
cxt.rotate(Math.PI*2/(i*6));
cxt.beginPath();
cxt.arc(0,i*12.5,5,0,Math.PI*2,true);
cxt.fill();
}
cxt.restore();
}
}
</script>
</head>
<body onLoad="draw()">
<canvas id="myCanvas" height="150" width="150" style="border:2px solid #06f;">
</canvas>
</body>
</html>
图片显示如下：
【rotate 方法，它用于以原点为中心旋转 canvas。该方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。旋转的中心点始终是 canvas 的原点，如果要改变它，我们需要用到 translate 方法。上面的例子用到了两层循环。第一层循环决定环的数量，第二层循环决定每环有多少个点。每环开始之前，都保存一下 canvas 的状态，这样恢复起来方便。每次画圆点，以一定夹角来旋转 canvas，而这个夹角则是由环上的圆点数目的决定的。最里层的环有 6 个圆点，这样，每次旋转的夹角就是 360/6 = 60 度。往外每一环的圆点数目是里面一环的 2 倍，那么每次旋转的夹角随之减半。】