旋转太极图

最新推荐文章于 2022-09-23 15:54:26 发布

qq_41839784

最新推荐文章于 2022-09-23 15:54:26 发布

阅读量564

点赞数 1

本文链接：https://blog.csdn.net/qq_41839784/article/details/89930579

版权

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>太极</title>
        <script src="script.js" type="text/javascript"></script>
        <style type="text/css">
            canvas{
                display: block;
                margin: 20px auto;
            }
        </style>
    </head>

    <body onload="main()">
        <canvas width="600" height="600" id="canvas"></canvas>
    </body>
    <script type="text/javascript">
        var angle = 0;
var canvas = null;
var context = null;

function main()
{
    //设置一个定时器
    window.setInterval(function()
    {
        canvas = document.getElementById("canvas");
        context = canvas.getContext("2d");
        //设置线宽
        context.lineWidth = 10;
        //保存当前状态
        context.save();
        //设置画布的基点
        context.translate(300,300);
        //对于画布中的太极图进行旋转
        context.rotate(angle);
        //填充背景颜色
        context.fillStyle = "black";
        //开始绘制新路径
        context.beginPath();
        //以现在的基点进行绘制圆形
        context.arc(0, 0, 290, 0, Math.PI, true);
        context.fill();
        //闭合路径
        context.closePath();
        //如上图
        context.fillStyle = "gray";
        context.beginPath();
        context.arc(0, 0, 290, 0, Math.PI, false);
        context.fill();
        context.closePath();

        context.fillStyle = "black";
        context.beginPath();
        context.arc(145, -0.6, 145, 0, Math.PI, false);
        context.fill();
        context.closePath();

        context.fillStyle = "gray";
        context.lineWidth = 0;
        context.beginPath();
        context.arc(-145, 0, 145, 0, Math.PI, true);
        context.fill();
        context.closePath();

        context.fillStyle = "black";
        context.beginPath();
        context.arc(-145, 0, 30, 0, 2*Math.PI, false);
        context.fill();
        context.closePath();

        context.fillStyle = "gray";
        context.beginPath();
        context.arc(145, 0, 30, 0, 2*Math.PI, false);
        context.fill();
        context.closePath();
        //恢复之前的画布状态
        context.restore();
        //重新对于图形进行状态改变
        angle += 0.005;

    },5);
}
    </script>
</html>

qq_41839784

关注

1
点赞
踩
1

收藏

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

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>太极</title> <script src="script.js" type="text/javascript"></scrip...
复制链接

扫一扫