HTML 5 canvas to draw Taiji Demo

A small case to practice canvas. If there is a small problem, welcome the big God to shoot bricks ... ^_*

Code effect preview Address: http://code.w3ctech.com/detail/2500.

 1  <  div  class  = "Container"  >  2   id  = "MyCanvas"   width  = "  height  = "" " ></ canvas  >  3  </ div  >  

1         * {2 padding:0;3 margin:0;4}5 6 Body{7 Background-color:#d5d3d4;8}9 Ten . Container{ One width:500px; A Height:500px; - position:relative; - Top:80px; the  Left:50%; - Transform:TranslateX ( -50%); - Background-color:#fff; - Border-radius:10px; + Box-shadow:0 0 5px #c2bfbf; -} + #myCanvas{ A Border:1px solid #000; at position:relative; - Top:50px; -  Left:50px; - Transform:Translate ( -50%,-50%); - Border-radius:50%; - Animation:myfirst 30s Linear infinite; in} - @keyframes Myfirst to{ + 0% {Transform:Rotate (0deg);} - 100%{Transform:Rotate (360deg);} the         }

1Window.onload =function () {2             varCanvas=document.getelementbyid ("MyCanvas");3             varCtx=canvas.getcontext ("2d");4 Ctx.beginpath ();5Ctx.arc ( -0.5 * Math.PI, 0.5 * Math.PI,false);6CTX.ARC (1.5 * math.pi, 0.5 * Math.PI,true);7Ctx.arc (0.5 * Math.PI, 1.5 * Math.PI,false);8 Ctx.closepath ();9Ctx.fillstyle = "BLACK";Ten Ctx.fill (); One  A Ctx.beginpath (); -Ctx.arc (0 * math.pi, 2 * Math.PI,false); -Ctx.fillstyle = "White"; the Ctx.fill (); - Ctx.beginpath (); -Ctx.arc (0 * math.pi, 2 * Math.PI,false); -Ctx.fillstyle = "BLACK"; + Ctx.fill (); -}

HTML 5 canvas to draw Taiji Demo