<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>太极图</title>
<style type="text/css">
#oneDiv{
display: block;
margin: 100 auto 0;
border: 1px solid gold;
position: relative;
}
</style>
</head>
<body>
<canvas class="canvas" id="oneDiv" width="500" height="500"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("oneDiv");
var context = canvas.getContext('2d');
var q =0;
var pointX = 0;
var pointY = 0;
setInterval(function () {
canvas.width =500;
canvas.height = 500;
context.translate(250,250);
q += Math.PI/180;
context.rotate(q)
//左半圆
context.beginPath();
context.arc(0, 0, 200,Math.PI*0.5,Math.PI*1.5, false);
context.closePath();
context.fillStyle = 'red';
context.fill();
context.stroke();
//右半圆
context.beginPath();
context.arc(0, 0, 200,Math.PI*0.5,Math.PI*1.5,true);
context.closePath();
context.fillStyle = 'black';
context.fill();
context.stroke();
//上小圆
context.beginPath();
context.arc(0, -100,100,0, Math.PI*2,true);
context.closePath();
context.fillStyle = 'black';
context.fill();
context.stroke();
//下小圆
context.beginPath();
context.arc(0, 100,100,0, Math.PI*2,true);
context.closePath();
context.fillStyle = 'red';
context.fill();
//上小圆
context.beginPath();
context.arc(0, -100,50,0, Math.PI*2,true);
context.closePath();
context.fillStyle = 'red';
context.fill();
context.stroke();
//下小圆
context.beginPath();
context.arc(0, 100,50,0, Math.PI*2,true);
context.closePath();
context.fillStyle = 'black';
context.fill();
context.stroke();
},0.1)
</script>
</html>