HTML绘制太极八卦图
生活随笔
收集整理的這篇文章主要介紹了
HTML绘制太极八卦图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
實現效果如下：
?
?
實現代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>太極八卦圖</title><style type="text/css">div{text-align: center;margin-top: 30px;}#mytj{background-color: skyblue; }</style> </head> <body><div><canvas width="600px" height="600px" id="mytj"></canvas></div><script type="text/javascript">var mytj = document.getElementById('mytj');var mt = mytj.getContext('2d');//左邊黑色大半圓 mt.beginPath(); mt.arc(300,300,200,90*Math.PI/180,270*Math.PI/180,false);mt.fillStyle='#000';mt.fill();//右邊白色大半圓 mt.beginPath(); mt.arc(300,300,200,270*Math.PI/180,90*Math.PI/180,false);mt.fillStyle='#fff';mt.fill();//左邊白色中半圓 mt.beginPath(); mt.arc(300,200,100,90*Math.PI/180,270*Math.PI/180,false);mt.fillStyle='#fff';mt.fill();//右邊黑色中半圓 mt.beginPath(); mt.arc(300,400,100,270*Math.PI/180,90*Math.PI/180,false);mt.fillStyle='#000';mt.fill();//左邊黑色小圓 mt.beginPath(); mt.arc(300,200,50,0*Math.PI/180,360*Math.PI/180,false);mt.fillStyle='#000';mt.fill();//右邊白色小圓 mt.beginPath(); mt.arc(300,400,50,0*Math.PI/180,360*Math.PI/180,false);mt.fillStyle='#fff';mt.fill();</script> </body> </html>?
轉載于:https://www.cnblogs.com/lidyfamily/p/11543115.html
總結
以上是生活随笔為你收集整理的HTML绘制太极八卦图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： hangfire支持mysql_快速入门
- 下一篇： 2017年html5行业报告,云适配发布