利用canvas画布和rotate()方法让画的图形旋转起来
上一篇讲了利用canvas画布画太极图，这一篇说的是让太极图旋转起来。
**思路：**利用HTML DOM 的setInterval()方法，它会按照指定的周期来调用函数或计算表达式。再利用画布的rotate()方法，该方法的参数angle表示旋转的量，用弧度表示。正值表示顺时针方向旋转，负值表示逆时针方向旋转。如果没有angle+=0.02，太极图只旋转一次。
源码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas-learningtitle>
head>
<body>
<canvas id="myCanvas" width="600" height="600"
style="background: yellow">canvas>
<script>
var cav=document.getElementById("myCanvas")
var cxt=cav.getContext("2d")
var angle=0
setInterval(function(){
// 保存当前环境的状态
cxt.save()
// 重新映射画布上的 (0,0) 位置
cxt.translate(300,300)
// 旋转当前绘图
cxt.rotate(angle)
cxt.beginPath()
cxt.fillStyle="#fff"
cxt.arc(0,0,200,0,2*Math.PI,false)
cxt.fill()
cxt.closePath()
cxt.beginPath()
cxt.arc(0,0,200,0.5*Math.PI,1.5*Math.PI,false)
cxt.fillStyle="#000"
cxt.fill()
cxt.closePath()
cxt.beginPath()
cxt.fillStyle="#fff"
cxt.arc(0,-100,100,0,2*Math.PI,false)
cxt.fill()
cxt.closePath()
cxt.beginPath()
cxt.fillStyle="#000"
cxt.arc(0,100,100,0,2*Math.PI,false)
cxt.fill()
cxt.closePath()
cxt.beginPath()
cxt.fillStyle="#000"
cxt.arc(0,-100,15,0,2*Math.PI,false)
cxt.fill()
cxt.closePath()
cxt.beginPath()
cxt.fillStyle="#fff"
cxt.arc(0,100,15,0,2*Math.PI,false)
cxt.fill()
cxt.closePath()
// 返回之前保存过的路径状态和属性
cxt.restore()
// 逆时针旋转
angle-=0.02
// 顺时针
// angle+=0.02
},15)
script>
body>
html>