HTML5画布小dome八卦图

  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8" />
  <title></title>
   
  <style type="text/css">
  #BAgua{
  width: 300px;
  height: 300px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  #mycanvas {
  animation: 2s zhuan infinite linear;
  }
  @keyframes zhuan {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
  }
  </style>
  </head>
  <body>
  <div id="BAgua">
  <canvas id="mycanvas" width="200" height="200"></canvas>
  </div>
  </body>
  </html>
  <script type="text/javascript">
  var bag=document.getElementById("mycanvas");
  var ctx =bag.getContext("2d");
   
  ctx.beginPath();//开始一条路径
  ctx.arc(100,100,100,0,Math.PI*2);//绘制原型
  ctx.stroke();
   
  ctx.beginPath();
  ctx.arc(100,100,100,Math.PI*0.5,Math.PI*1.5);
  ctx.fillStyle="black";
  ctx.fill();
   
  ctx.beginPath();
  ctx.arc(100,50,50,Math.PI*0.5,Math.PI*1.5);
  ctx.stroke();
  ctx.fillStyle="white";
  ctx.fill();
   
  ctx.beginPath();
  ctx.arc(100,150,50,Math.PI*0.5,Math.PI*1.5,true);
  ctx.stroke();
  ctx.fillStyle="black";
  ctx.fill();
   
  ctx.beginPath();
  ctx.arc(100,50,10,0,Math.PI*2);
  ctx.stroke();
  ctx.fillStyle="black";
  ctx.fill();
   
  ctx.beginPath();
  ctx.arc(100,150,10,0,Math.PI*2);
  ctx.stroke();
  ctx.fillStyle="white";
  ctx.fill();
   
   
  </script>
   
posted @ 2019-03-14 16:44  北唐旧梦  阅读(381)  评论(0)    收藏  举报