HTML 5：绘制旋转的太极图
HTML：
<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>Canvas绘制旋转太极</title> </head> <body> <canvas id="face" width="200" height="200"></canvas> </body> </html>
JavaScript:
var canvas = document.getElementById("face"); var cxt = canvas.getContext('2d'); var r = 100; //半径 var pointX = 0; //圆心x坐标 var pointY = 0; //圆心y坐标 // 绘制扇形填充 function pie (g,radius,startAngle,endAngle,color,x,y) { g.fillStyle = color; g.beginPath(); g.arc(x,y,radius,startAngle,endAngle,true); g.closePath(); g.fill(); } var q = 0; function redrawTaiji() { // 保存状态 cxt.save(); // 清理图像 cxt.clearRect(0,0,canvas.width,canvas.height); cxt.translate(100,100); q += Math.PI / 6; cxt.rotate(q); cxt.beginPath(); // 绘制两个最大圆 pie(cxt,r,3/4*Math.PI*2,5/4*Math.PI*2,"#FF072A",pointX,pointY); pie(cxt,r,1/4*Math.PI*2,3/4*Math.PI*2,"#195089",pointX,pointY); // 绘制两个中圆 pie(cxt,r/2,0,Math.PI*2,"#FF072A",pointX,pointY+r/2); pie(cxt,r/2,0,Math.PI*2,"#195089",pointX,pointY-r/2); // 绘制两个最小圆 pie(cxt,r/4,0,Math.PI*2,"#FF072A",pointX,pointY-r/2); pie(cxt,r/4,0,Math.PI*2,"#195089",pointX,pointY+r/2); cxt.closePath(); // 恢复状态 cxt.restore(); } function initTaiji() { redrawTaiji(); setInterval(redrawTaiji,500); } initTaiji();
效果:http://jsfiddle.net/Web_Code/88c9d2g2/embedded/result/
原文首发：http://www.ido321.com/1308.html
下一篇：程序员成长道路上必经的几个阶段
