python：taichi 绘制太极图

news2025/1/31 6:06:34

安装 pip install taichi
pip install opencv-python pycairo
where ti
# -- taichi 高性能可视化 Demo 展览
ti gallery

D:\Python39\Lib\site-packages\taichi\examples\algorithm\circle-packing\
点击图片，执行 circle_packing_image.py 可见

编写 taijitu.py 如下

# -*- coding: utf-8 -*-
""" 绘制太极图 """
import turtle as t

# 设置画笔速度
t.speed(1)

#画出大概
t.fillcolor("black")
t.begin_fill()
t.circle(-100,180)
t.circle(-50,180)
t.circle(50,180)
t.end_fill()
t.circle(100,180)
t.right(-90)
t.forward(50)

# 画圆点
t.dot(22,'white')
t.penup()
t.forward(100)
t.pendown()
t.dot(22,'black')

# 写字
t.penup()
t.forward(100)
t.pendown()
t.write('太极图',align='center',font=('楷体',50,'italic','underline','bold'))
# 隐藏海龟 hideturtle()
t.ht()
t.done()

推荐：用HTML + CSS实现旋转的太极图

编写 taijitu.html 如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转的太极图</title>
</head>
<body>
    <div class="container">
        <div class="box">
            <div class="one"></div>
            <div class="two"></div>
        </div>
    </div>
</body>
 
<style>
    * { margin: 0; padding: 0;}
    .container{
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: gray;
    }
    .box{
        width: 500px;
        height: 500px;
        background-color: #000;
        border: 1px solid #fff;
        border-radius: 50%;
        background: linear-gradient(to right,black 50%,white 50%);
        position: relative;
        animation: rota 2s linear infinite;
    }
    .box:hover{
        animation-play-state: paused;
    }
    .one{
        width: 250px;
        height: 250px;
        border-radius: 50%;
        background: -webkit-radial-gradient(center,white 20%,black 20%);
        position: absolute;
        top: 0;
        left: 125px;
    }
    .two{
        width: 250px;
        height: 250px;
        border-radius: 50%;
        background: -webkit-radial-gradient(center,black 20%,white 20%);
        position: absolute;
        bottom: 0;
        left: 125px;
    }
 
    @keyframes rota {
        0%  { transform: rotate(0deg);}
        100%{ transform: rotate(360deg);}
    }
</style>
</html>