旋转的八卦图 

<body>
    <div id="div"></div>
    <canvas width=400 height=400 style="border:1px solid"></canvas>
    <script>

        const canvas = document.querySelector("canvas");
        const pen = canvas.getContext("2d");
        const pi = Math.PI;
        pen.translate(200, 200)
        setInterval(function () {
            pen.rotate(pi / 180);
            //黑色勾玉
            pen.beginPath();
            pen.arc(0, 0, 200, -1 / 2 * pi, 1 / 2 * pi);
            pen.arc(0, 100, 100, 1 / 2 * pi, -1 / 2 * pi);
            pen.arc(0, -100, 100, 1 / 2 * pi, -1 / 2 * pi, true);
            pen.fillStyle = "black";
            pen.closePath();
            pen.fill();
            //白色勾玉
            pen.beginPath();
            pen.arc(0, 0, 200, -1 / 2 * pi, 1 / 2 * pi, true);
            pen.arc(0, 100, 100, 1 / 2 * pi, -1 / 2 * pi);
            pen.arc(0, -100, 100, 1 / 2 * pi, -1 / 2 * pi, true);
            pen.fillStyle = "#fff";
            pen.closePath();
            pen.fill();
            pen.stroke();
            //黑色小圆
            pen.beginPath();
            pen.arc(0, -100, 30, 0, 2 * pi);
            pen.fillStyle = "black";
            pen.closePath();
            pen.fill();
            //白色小圆
            pen.beginPath();
            pen.arc(0, 100, 30, 0, 2 * pi);
            pen.fillStyle = "#fff";
            pen.closePath();
            pen.fill();
        }, 100);
    </script>
</body>

 

posted @ 2020-03-17 21:49  糖糖果果  阅读(531)  评论(0)    收藏  举报