![在這裏插入圖片描述]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas之旋轉太極圖</title>
</head>
<body>
<canvas id="my" width="600px" height="600px" style="background-color: yellow;">
</canvas>
<script>
var cxt=document.getElementById('my').getContext('2d')
var angle=0
setInterval(function()
{
cxt.beginPath()
cxt.save()
cxt.translate(300,300)
cxt.rotate(angle)
cxt.fillStyle="#fff"
cxt.arc(0,0,200,0,2*Math.PI,false)
cxt.fill()
cxt.closePath()
cxt.beginPath()
cxt.fillStyle="#000"
cxt.arc(0,0,200,0.5*Math.PI,1.5*Math.PI,false)
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
},5)
</script>
</body>
</html>
