案例--旋转太极图

html部分

    <canvas id="can" width="500" height="500"></canvas>

样式部分

        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: skyblue;
        }
        #can{
            margin: 30px auto;
            animation: turn 3s linear infinite;
        }
        @keyframes turn{
            /* 0%{transform: rotate(0deg);}
            25%{transform: rotate(90deg);}
            50%{transform: rotate(180deg);}
            75%{transform: rotate(270deg);} */
            100%{transform: rotate(360deg);}
        }

逻辑部分

    <script>
        var cas = document.getElementById('can').getContext('2d')

        // cas.beginPath()
        // cas.arc(250,250,250,Math.PI*1/2,Math.PI*3/2)
        // cas.fillStyle = 'black'
        // cas.fill()

        // cas.beginPath()
        // cas.arc(250,250,250,Math.PI*3/2,Math.PI*1/2)
        // cas.fillStyle = 'white'
        // cas.fill()

        // cas.beginPath()
        // cas.arc(250,125,125,0,Math.PI*2)
        // cas.fillStyle = 'black'   //#000
        // cas.fill()

        // cas.beginPath()
        // cas.arc(250,375,125,0,Math.PI*2)
        // cas.fillStyle = 'white'  //#fff
        // cas.fill()

        // cas.beginPath()
        // cas.arc(250,125,40,0,Math.PI*2)
        // cas.fillStyle = 'white' 
        // cas.fill()

        // cas.beginPath()
        // cas.arc(250,375,40,0,Math.PI*2)
        // cas.fillStyle = 'black'  
        // cas.fill()

        //封装后
        function arc(cas,x,y,r,start,end,color){
            cas.beginPath()
            cas.arc(x,y,r,start,end)
            cas.fillStyle = color  
            cas.fill()
        }

        arc(cas,250,250,250,Math.PI*1/2,Math.PI*3/2,'#000')
        arc(cas,250,250,250,Math.PI*3/2,Math.PI*1/2,'#fff')
        arc(cas,250,125,125,0,Math.PI*2,'#000')
        arc(cas,250,375,125,0,Math.PI*2,'#fff')
        arc(cas,250,125,40,0,Math.PI*2,'#fff')
        arc(cas,250,375,40,0,Math.PI*2,'#000')
    </script>