使用html5和js畫(huà)個(gè)太極圖

開(kāi)發(fā)技術(shù) 2015/5/15

<canvas id="mycanvas" width="600" height="400" style="border: 1px solid #ccc; background-color: #ccc;">你的瀏覽器不支持canvas</canvas>

<script>

   var canvas = document.getElementById('mycanvas');

   var ctx = canvas.getContext('2d');

   //左邊半個(gè)黑圓

   ctx.beginPath();

   ctx.fillStyle="#000";

   ctx.arc(200,200,150,0.5*Math.PI,1.5*Math.PI,false);

   ctx.fill();

   //右邊半個(gè)白圓

   ctx.beginPath();

   ctx.fillStyle="#fff";

   ctx.arc(200,200,150,1.5*Math.PI,2.5*Math.PI,false);

   ctx.fill();

   //圓心

   /*ctx.beginPath();

   ctx.strokeStyle="#000";

   ctx.arc(200,200,1,0,2*Math.PI,false);

   ctx.stroke();*/

   //上面半個(gè)圓

   ctx.beginPath();

   ctx.fillStyle="#fff";

   ctx.arc(200,125,75,0.5*Math.PI,1.5*Math.PI,false);

   ctx.fill();

   //上面半個(gè)圓中小黑圓

   ctx.beginPath();

   ctx.fillStyle="#000";

   ctx.arc(200,125,10,0,2*Math.PI,false);

   ctx.fill();

   //下面半個(gè)圓

   ctx.beginPath();

   ctx.fillStyle="#000";

   ctx.arc(200,275,75,1.5*Math.PI,2.5*Math.PI,false);

   ctx.fill();

   //下面半個(gè)圓中個(gè)小白圓

   ctx.beginPath();

   ctx.fillStyle="#fff";

   ctx.arc(200,275,10,0,2*Math.PI,false);

   ctx.fill();

</script>