html5 画圆

最新推荐文章于 2024-09-05 14:01:36 发布

一顿操作猛如虎，啥也不是！

最新推荐文章于 2024-09-05 14:01:36 发布

阅读量950

点赞数 1

分类专栏： canvas html5

html5 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

canvas

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<body>
    <canvas id="myCanvas" width="1000" height="1000">
        <p>Your browserdoes not support the canvas element!</p>
    </canvas>

    <script type="text/javascript">
        window.onload = function () {
            clock();
            tt = setInterval(clock, 200);///
        };
        var tt;
        var r = 200;
        var p = [];
        for (var i = 1; i <= 11; i++) {
            p[i * 2] = -Math.sin(Math.PI / 6) * r + Math.sin(Math.PI / 6) * r * i / 10; //x
            p[i * 2 + 1] = Math.cos(Math.PI / 3) * r - 2 * Math.sin(Math.PI / 3) * Math.cos(Math.PI / 6) * r * i / 10; //y

        }
        var j = 1;
        function clock() {
            if (j >= 10) {
                clearInterval(tt);
            }
            var c = document.getElementById("myCanvas").getContext("2d");
            c.clearRect(0, 0, 1000, 1000);    ///初始化画布
            c.save();
            c.translate(359, 366);
            c.rotate((j + 1) * Math.PI / 40);
            c.lineCap = "round";
            c.save();

            c.strokeStyle = "#D40000";
            c.lineWidth = 1;
            c.beginPath();
            c.moveTo(Math.cos(0.75 * Math.PI) * r, Math.sin(0.75 * Math.PI) * r);
            //c.lineTo(p[j * 2], p[j * 2 + 1]); //两种效果
            c.lineTo(Math.cos(0.75 * Math.PI + Math.PI * 2 * j / 30) * r, Math.sin(0.75 * Math.PI + Math.PI * 2 * j / 30) * r);
            c.stroke();
            c.save();

            c.lineWidth = 1;
            c.strokeStyle = "#325FA2";
            c.beginPath();
            var k = 1;
            if (j > 0) k = j;
            c.arc(0, 0, r, 0.75 * Math.PI, 0.75 * Math.PI + Math.PI * 2 * k / 30, false);
            c.stroke();
            c.restore();
            c.restore();
            c.restore();
            j++;

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