html 5 canvas 绘制太极demo

　　一个练习canvas的小案例。其中若有小问题，欢迎大神拍砖……^_*

　　代码效果预览地址：http://code.w3ctech.com/detail/2500

     <div class="container">
         <canvas id="myCanvas" width="400" height="400" ></canvas>
     </div>

         * {
             padding:;
             margin:;
         }

         body {
             background-color: #d5d3d4;
         }

         .container {
             width: 500px;
             height: 500px;
             position: relative;
             top: 80px;
             left: 50%;
             transform: translateX(-50%);
             background-color: #fff;
             border-radius: 10px;
             box-shadow: 0 0 5px #c2bfbf;
         }
         #myCanvas{
             border:1px solid #000;
             position:relative;
             top: 50px;
             left: 50px;
             transform:translate(-50%,-50%);
             border-radius:50%;
             animation: myfirst 30s linear infinite;
         }
         @keyframes myfirst
         {
             0%   {transform:rotate(0deg);}
             100% {transform:rotate(360deg);}
         }

         window.onload = function () {
             var canvas=document.getElementById("myCanvas");
             var ctx=canvas.getContext("2d");
             ctx.beginPath();
             ctx.arc(200, 100, 100, -0.5 * Math.PI, 0.5 * Math.PI, false);
             ctx.arc(200, 300, 100, 1.5 * Math.PI, 0.5 * Math.PI, true);
             ctx.arc(200, 200, 200, 0.5 * Math.PI, 1.5 * Math.PI, false);
             ctx.closePath();
             ctx.fillStyle = "black";
             ctx.fill();

             ctx.beginPath();
             ctx.arc(200, 100, 25, 0 * Math.PI, 2 * Math.PI, false);
             ctx.fillStyle = "white";
             ctx.fill();
             ctx.beginPath();
             ctx.arc(200, 300, 25, 0 * Math.PI, 2 * Math.PI, false);
             ctx.fillStyle = "black";
             ctx.fill();
         }