<!DOCTYPEHTML><html><body><canvasid="myCanvas"width="500"height="500">yourbrowserdoesnotsupportthecanvastag</canvas><scripttype="text/javascript">vardeg=0;varr=30;varrl=100;functiondrawTaiji(){varcanvas=document.getElementById('myCanvas');varcontext=canvas.getContext('2d');varcolorA="rgb(0,0,0)";varcolorB="red";varpx=Math.sin(deg)*r;varpy=Math.cos(deg)*r;context.clearRect(0,0,300,300);context.beginPath();context.fillStyle=colorA;context.arc(rl,rl,60,0.5*Math.PI+deg,1.5*Math.PI+deg,true);context.closePath();context.fill();context.fillStyle=colorB;context.beginPath();context.arc(rl,rl,60,1.5*Math.PI+deg,0.5*Math.PI+deg,true);context.closePath();context.fill();context.fillStyle=colorB;context.beginPath();context.arc(rl+px,rl-py,30,0.5*Math.PI+deg,1.5*Math.PI+deg,true);context.closePath();context.fill();context.fillStyle=colorA;context.beginPath();context.arc(rl-px,rl+py,30,1.5*Math.PI+deg,0.5*Math.PI+deg,true);context.closePath();context.fill();context.fillStyle=colorA;context.beginPath();context.arc(rl+px,rl-py,8,0,2*Math.PI,true);context.closePath();context.fill();context.fillStyle=colorB;context.beginPath();context.arc(rl-px,rl+py,8,0,2*Math.PI,true);context.closePath();context.fill();deg+=0.1;}setInterval(drawTaiji, 100);</script></body></html>


<!DOCTYPEHTML><html><body><canvasid="myCanvas"width="500"height="500">yourbrowserdoesnotsupportthecanvastag</canvas><scripttype="text/javascript">varcanvas=document.getElementById('myCanvas');varctx=canvas.getContext("2d");varangle=0;varcount=360;varclrA='#000';varclrB='red';functiontaiji(x,y,radius,angle,wise){angleangle=angle||0;wisewise=wise?1:-1;ctx.save();ctx.translate(x,y);ctx.rotate(angle);ctx.fillStyle=clrA;ctx.beginPath();ctx.arc(0,0,radius,0,Math.PI,true);ctx.fill();ctx.beginPath();ctx.fillStyle=clrB;ctx.arc(0,0,radius,0,Math.PI,false);ctx.fill();ctx.fillStyle=clrB;ctx.beginPath();ctx.arc(wise*-0.5*radius,0,radius/2,0,Math.PI*2,true);ctx.fill();ctx.beginPath();ctx.fillStyle=clrA;ctx.arc(wise*+0.5*radius,0,radius/2,0,Math.PI*2,false);ctx.arc(wise*-0.5*radius,0,radius/10,0,Math.PI*2,true);ctx.fill();ctx.beginPath();ctx.fillStyle=clrB;ctx.arc(wise*+0.5*radius,0,radius/10,0,Math.PI*2,true);ctx.fill();ctx.restore();}loop=setInterval(function(){beginTag=true;ctx.clearRect(0,0,canvas.width,canvas.height);taiji(200,200,50,Math.PI*(angle/count)*2,true);//taiji(350,350,50,Math.PI*((count-angle)/count)*2,false);angle=(angle+5)%count;},50);</script></body></html>

出自：http://www.cnblogs.com/iamzhanglei/archive/2012/03/27/2419268.html