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

最新推荐文章于 2021-07-01 08:29:28 发布

Tonglanlinling

最新推荐文章于 2021-07-01 08:29:28 发布

阅读量563

点赞数

CC 4.0 BY-SA版权

分类专栏： canvas 文章标签： html5 css3 canvas 太极图一个元素实现旋转太极图

本文链接：https://blog.youkuaiyun.com/Tonglanlinling/article/details/88887527

canvas 专栏收录该内容

3 篇文章

订阅专栏

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

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

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