當前位置:asp編程網>技術教程>Html5教程>  正文

使用html5和js畫個太極圖

2017-06-08 13:19:53   來源:www.chxzyb.icu   作者:loveasp   瀏覽量:2449   收藏

功能:html5畫太極圖
來源:www.chxzyb.icu
原創文章,轉載請注冊來源asp編程網,謝謝

<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');


   //左邊半個黑圓

   ctx.beginPath();

   ctx.fillStyle="#000";

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

   ctx.fill();


   //右邊半個白圓

   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();*/


   //上面半個圓

   ctx.beginPath();

   ctx.fillStyle="#fff";

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

   ctx.fill();


   //上面半個圓中小黑圓

   ctx.beginPath();

   ctx.fillStyle="#000";

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

   ctx.fill();


   //下面半個圓

   ctx.beginPath();

   ctx.fillStyle="#000";

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

   ctx.fill();


   //下面半個圓中個小白圓

   ctx.beginPath();

   ctx.fillStyle="#fff";

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

   ctx.fill();


</script>

關于我們-廣告合作-聯系我們-積分規則-網站地圖

Copyright(C)2013-2017版權所屬asp編程網
天津福利彩票快乐十分电子版