独角兽企业重金招聘Python工程师标准>>>
HTML：
<!DOCTYPE><html><head><metacharset="utf-8"/><title>Canvas绘制旋转太极</title></head><body><canvasid="face"width="200"height="200"></canvas></body></html>
JavaScript:
varcanvas=document.getElementById("face");varcxt=canvas.getContext('2d');varr=100;//半径varpointX=0;//圆心x坐标varpointY=0;//圆心y坐标//绘制扇形填充functionpie(g,radius,startAngle,endAngle,color,x,y){g.fillStyle=color;g.beginPath();g.arc(x,y,radius,startAngle,endAngle,true);g.closePath();g.fill();}varq=0;functionredrawTaiji(){//保存状态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();}functioninitTaiji(){redrawTaiji();setInterval(redrawTaiji,500);}initTaiji();
效果:/Web_Code/88c9d2g2/embedded/result/
原文首发：/1308.html
