canvas实现旋转太极图(第一发)

最新推荐文章于 2026-06-16 18:21:29 发布

原创最新推荐文章于 2026-06-16 18:21:29 发布 · 595 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html5 #css3 #canvas #太极图 #一个元素实现旋转太极图

canvas 专栏收录该内容

3 篇文章

订阅专栏

本文通过HTML5的Canvas API详细讲解如何实现一个元素动态旋转的太极图效果，结合CSS3让太极图平滑转动，展示了一种利用前端技术创作动态图形的方法。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用canvas画太极图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            margin-left: -5px;
        }
        canvas:hover {
            transform: rotate(3600deg);
            transition: all 10s linear;
        }
    </style>
</head>
<body>

<canvas id="myCanvas" width="500" height="500">
    您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
    var mc = document.getElementById("myCanvas");
    var ctx = mc.getContext("2d");

    //绘制太极图
    ctx.arc(250,250,200,0,Math.PI*2);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(250,250,200,-Math.PI/2,Math.PI/2);
    ctx.fillStyle="#fff";
    ctx.fill();
    ctx.beginPath();
    ctx.arc(250,150,100,0,Math.PI*2);
    ctx.fillStyle="#000";
    ctx.fill();
    ctx.beginPath();
    ctx.arc(250,350,100,0,Math.PI*2);
    ctx.fillStyle="#fff";
    ctx.fill();
    ctx.beginPath();
    ctx.arc(250,150,30,0,Math.PI*2);
    ctx.fillStyle="#fff";
    ctx.fill();
    ctx.beginPath();
    ctx.arc(250,350,30,0,Math.PI*2);
    ctx.fillStyle="#000";
    ctx.fill();
    ctx.beginPath();

</script>
</body>
</html>