Home > Developer > Web Develop
Html:
<!DOCTYPE><HTML><Head> <Meta CharSet= "Utf-8" /> <title>Canvas drawing Rotational Taiji</title></Head><Body> <Canvas ID= "Face" width= "$" Height= "$"></Canvas></Body></HTML>
Javascript:
varCanvas = document.getElementById ("Face");varCXT = Canvas.getcontext (' 2d ');varr = 100;//RadiusvarPointx = 0;//center X coordinatevarPointy = 0;//Center Y coordinate //Draw sector fills 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 () {//Save statusCxt.save ();//Clean up imagesCxt.clearrect (0,0,canvas.width,canvas.height); Cxt.translate (100,100); Q + = MATH.PI/6; Cxt.rotate (q); Cxt.beginpath ();//Draw two maximum circlesPie (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);//Draw two mid-circlePie (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);//Draw two minimum circlesPie (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 ();//Recovery statusCxt.restore (); }functionInittaiji () {Redrawtaiji (); SetInterval (redrawtaiji,500); } Inittaiji ();
Effect: http://jsfiddle.net/Web_Code/88c9d2g2/embedded/result/
Original starting: http://www.ido321.com/1308.html
Next: The programmer's growth path must pass several stages
HTML 5: Drawing the rotated Taiji figure
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
