旋转的太极

最新推荐文章于 2024-08-12 20:21:42 发布

ekjheidj

最新推荐文章于 2024-08-12 20:21:42 发布

阅读量510

点赞数 1

分类专栏：源码文章标签： canvas html css 旋转太极

本文链接：https://blog.csdn.net/ekjheidj/article/details/46623179

版权

源码专栏收录该内容

5 篇文章 0 订阅

订阅专栏


不多说，直接上代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta charset="utf-8"/>
    <title>Canvas绘制旋转太极</title>
    <style type="text/css">
        @-webkit-keyframes circleAnimate{
            from{-webkit-transform: rotate(0deg);}
            to{-webkit-transform: rotate(-359deg);}}
        @keyframes circleAnimate{
            from{transform: rotate(0deg);}
            to{transform: rotate(-359deg);}}
        .circle-animate{
            /*-webkit-transform-origin: 50% 50%;*/
            /*transform-origin: 50% 50%;*/
            -webkit-animation: circleAnimate 2s infinite linear;
            animation: circleAnimate 2s infinite linear;
        }
    </style>
</head>
<body style="width: 500px;height: 500px;background-color: #cccccc;">
<canvas id="face" width="200" height="200" class="circle-animate"></canvas>
</body>
</html>

<script>
    var canvas = document.getElementById("face");
    var cxt = canvas.getContext('2d');
    var r = 100;   //半径
    var pointX = 0;  //圆心x坐标
    var pointY = 0; //圆心y坐标
    // 绘制扇形填充
    function pie(g, radius, startAngle, endAngle, color, x, y) {
        g.fillStyle = color;
        g.beginPath();
        g.arc(x, y, radius, startAngle, endAngle, true);
        g.closePath();
        g.fill();
    }
    var q = 0;
    function redrawTaiji() {
        // 保存状态
        cxt.save();
        // 清理图像
        cxt.clearRect(0, 0, canvas.width, canvas.height);
        cxt.translate(100, 100);
        q += Math.PI / 6;
        cxt.rotate(q);
        cxt.beginPath();
        // 绘制两个最大圆
        pie(cxt, r, 3 / 4 * Math.PI * 2, 5 / 4 * Math.PI * 2, "rgb(0,0,0)", pointX, pointY);
        pie(cxt, r, 1 / 4 * Math.PI * 2, 3 / 4 * Math.PI * 2, "rgb(255,255,255)", pointX, pointY);
        // 绘制两个中圆
        pie(cxt, r / 2, 0, Math.PI * 2, "rgb(0,0,0)", pointX, pointY + r / 2);
        pie(cxt, r / 2, 0, Math.PI * 2, "rgb(255,255,255)", pointX, pointY - r / 2);
        // 绘制两个最小圆
        pie(cxt, r / 4, 0, Math.PI * 2, "rgb(0,0,0)", pointX, pointY - r / 2);
        pie(cxt, r / 4, 0, Math.PI * 2, "rgb(255,255,255)", pointX, pointY + r / 2);
        cxt.closePath();
    }
    function initTaiji() {
        redrawTaiji();
    }
    initTaiji();
</script>

ekjheidj

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
旋转的太极

不多说，直接上代码 Canvas绘制旋转太极 @-webkit-keyframes circleAnimate{ from{-webkit-transform: rotate(0deg);} to{-webkit-transform: rotate(-359deg);}}
复制链接

扫一扫

专栏目录