核心提示：先放代码：!DOCTYPE htnlhtmlheadtitlerevolve circle/titlescriptvar drawingCircle = function(x,y,r,begin,en...
先放代码：
<!DOCTYPE htnl>
<html>
<head>
<title>revolve circle</title>
<script>
var drawingCircle = function(x,y,r,begin,end,yn,color,ctx){
//yn为1画填充圆，为0画不填充圆，color为1颜色为黑，0颜色为白
if(yn==1){
ctx.beginPath();
ctx.arc(x,y,r,begin,end,true);
if(color==1)
ctx.fillStyle = "black";
else
ctx.fillStyle = "white";
ctx.fill();
}
else{
ctx.beginPath();
ctx.arc(x,y,r,begin,end,true);
ctx.stroke();
}
}
var drawing = function(){
var can = document.getElementById("canvas");
var ctx = can.getContext("2d");
var degree = 0;
var y1 = 0;
var x1 = 0;
var y2 = 0;
var x2 = 0;
setInterval(function(){
ctx.clearRect(0,0,200,200);
y1 = 100-Math.cos(degree)*45;
x1 = 100+Math.sin(degree)*45;
y2 = 100+Math.cos(degree)*45;
x2 = 100-Math.sin(degree)*45;
drawingCircle(100,100,90,90*Math.PI/180+degree,-90*Math.PI/180+degree,1,1,ctx);
drawingCircle(100,100,90,-90*Math.PI/180+degree,90*Math.PI/180+degree,0,0,ctx);
drawingCircle(x1,y1,45,120*Math.PI/180+degree,-120*Math.PI/180+degree,1,0,ctx);
drawingCircle(x2,y2,45,-60*Math.PI/180+degree,60*Math.PI/180+degree,1,1,ctx);
drawingCircle(x1,y1,11,0*Math.PI/180,360*Math.PI/180,1,1,ctx);
drawingCircle(x2,y2,11,0*Math.PI/180,360*Math.PI/180,1,0,ctx);
degree = degree + 1*Math.PI/180;
if(degree==360*Math.PI/180)
degree=0;
}
,30)
}
window.onload = drawing;
</script>
</head>
<body>
<canvas id="canvas" width="200" height="200" style = "border:1px dashed gray;"></canvas>
</body>
</html>
