html代码实现太极图

HTML（Hypertext Markup Language，超文本标记语言）是一种用于创建网页的标准语言。它由许多标签（一对尖括号包围的关键字）组成，这些标签告诉浏览器如何显示内容。使用HTML代码，我们可以轻松地创建各种类型的图像和图形，如太极图。

在HTML中创建太极图，我们需要使用一些基本的标签，如body、div、style和canvas。以下是一个简单的HTML代码片段，用于创建太极图：

 <!DOCTYPE html>
    <html>
    <head>
        <title>太极图</title>
        <style>
            #canvas {
                background-color: white;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div id="canvas">
            <canvas id="taiji" width="300" height="300"></canvas>
        </div>
        <script>
            var canvas = document.getElementById("taiji");
            var ctx = canvas.getContext("2d");
            var centerX = 150,centerY = 150,radius = 100;

            // 绘制黑色半圆
            ctx.beginPath();
            ctx.arc(centerX,centerY,radius,Math.PI,false);
            ctx.fillStyle = "black";
            ctx.fill();

            // 绘制白色半圆
            ctx.beginPath();
            ctx.arc(centerX,true);
            ctx.fillStyle = "white";
            ctx.fill();

            // 绘制黑色小圆
            ctx.beginPath();
            ctx.arc(centerX,centerY - radius/2,radius/2,Math.PI*2,true);
            ctx.fillStyle = "black";
            ctx.fill();

            // 绘制白色小圆
            ctx.beginPath();
            ctx.arc(centerX,centerY + radius/2,true);
            ctx.fillStyle = "white";
            ctx.fill();

            // 绘制黑色的小点
            ctx.beginPath();
            ctx.arc(centerX,radius/10,true);
            ctx.fillStyle = "black";
            ctx.fill();

            // 绘制白色的小点
            ctx.beginPath();
            ctx.arc(centerX,true);
            ctx.fillStyle = "white";
            ctx.fill();
        </script>
    </body>
    </html>

示例中，我们使用了html中的canvas标签来创建绘图区域，并使用JavaScript中的canvas context对象来绘制图形。我们使用arc方法来绘制半圆和小圆，并使用fillStyle参数设置颜色。

在网页浏览器中打开此HTML文件，即可看到太极图。如需对图形进行修改，只需使用css样式表对其进行调整，例如可以更改颜色、大小、位置等等。

html代码实现太极图

相关文章