使用HTML5 Canvas绘制一个太极，并令其转动

最新推荐文章于 2024-09-10 15:13:43 发布

ChangeLiuZijian

最新推荐文章于 2024-09-10 15:13:43 发布

阅读量3.3k

点赞数 1

分类专栏： HTML5/CSS3/JavaScript 文章标签： canvas html html5

本文链接：https://blog.csdn.net/yylj2015/article/details/52769385

版权

HTML5/CSS3/JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

静态效果图如下，代码运行效果是转动的

HTML部分如下

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

</html>

JavaScript部分如下

var angle = 0;
var canvas = null;
var context = null;

function main()
{
    window.setInterval(function()
    {
        canvas = document.getElementById("canvas");
        context = canvas.getContext("2d");

        context.clearRect(0, 0, 600, 600);
        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.02;

    },5);
}