欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > HTML >内容正文

HTML

HTML绘制太极八卦图

发布时间：2024/1/8 HTML 42 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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绘制太极八卦图的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。