HTML绘制太极八卦图

最新推荐文章于 2024-04-10 12:41:05 发布

Y1916326465

最新推荐文章于 2024-04-10 12:41:05 发布

阅读量1.8k

点赞数

文章标签： python 前端 javascript ViewUI

原文链接：http://www.cnblogs.com/lidyfamily/p/11543115.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

Y1916326465

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML绘制太极八卦图

实现效果如下：实现代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>太极八卦图</title> <style type="text/css">...
复制链接

扫一扫