太极图php代码,HTML 5：绘制旋转的太极图

HTML：

Canvas绘制旋转太极

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();