Canvas画布+animation绘制太极图及实现旋转

css代码

#canvas{
   
      /* transform: rotate(360deg); */
       /* 动画名字 动画执行时间 匀速执行 执行无限次 */
      animation: rotate 10s linear infinite; 
    }
    /* 太极图动画声明 */
    @keyframes rotate {
   
       0%{
   
         transform: none;
       }
       100%{
   
         /* 旋转360度 */
         transform: rotate(360deg);
       }       
      }

JS代码
（注：1.文档加载完毕后执行 2.script标签引入js代码）

//文档加载完毕后执行
    window.onload = function(){
   
    //获取canvas节点
    var canvas = document.getElementById('canvas');
    //获取2D上下文对象
    var context = canvas.getContext('2d');
     //最外层大圆
     //开始路径
     context.beginPath();
     //设置圆形路径
     context.arc(