HTML绘制太极八卦图

最新推荐文章于 2024-07-21 16:20:05 发布

Y1916326465

最新推荐文章于 2024-07-21 16:20:05 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

文章标签： python 前端 javascript ViewUI

原文链接：http://www.cnblogs.com/lidyfamily/p/11543115.html

本文详细介绍如何使用HTML5的Canvas API绘制太极八卦图，包括黑色大半圆、白色大半圆、白色中半圆、黑色中半圆以及左右两侧的小圆。通过具体的代码实现，展示了一种将中国传统元素与现代网页技术结合的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果如下：

实现代码如下：

<!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>