.animation{  width: 800px;  height: 800px;  border: 1px solid #000;}#canvas{  animation: rotate 6s linear infinite;  }/* 給太極圖設置旋轉動畫 */@keyframes rotate{  0%{    transform: none;  }  100%{    transform: rotate(360deg);  }}

//文檔加載完畢后執行函數window.onload = function(){  //獲取畫布對象  var canvas = document.getElementById('canvas');  //獲取上下文對象  var context = canvas.getContext('2d');  //圓開始路徑  context.beginPath();  //繪制最外層的大圓(黑色)  context.arc(400, 400, 300, Math.PI / 180 * 0, Math.PI / 180 * 360);  //將大圓填充為黑色  context.fillStyle = '#000';  context.fill();  //繪制左半圓(白色)  context.beginPath();  context.arc(400, 400, 300, Math.PI / 180 * 90, Math.PI / 180 * 270);  context.fillStyle = '#fff';  context.fill();   //繪制右半圓(黑色)，會覆蓋外層大圓，顏色一樣。所以寫不寫都可以  /* context.beginPath();  context.arc(400, 400, 300, Math.PI / 180 * 270, Math.PI / 180 * 90);  context.fillStyle = '#000';  context.fill(); */  //繪制左上半圓(黑色)  context.beginPath();  context.arc(400, 250, 150, Math.PI / 180 * 90, Math.PI / 180 * 270);  context.fillStyle = '#000';  context.fill();   //繪制右下半圓(白色)  context.beginPath();  context.arc(400, 550, 150, Math.PI / 180 * 270, Math.PI / 180 * 90);  context.fillStyle = '#fff';  context.fill();   //繪制左上小半圓(白色)  context.beginPath();  context.arc(400, 250, 35, Math.PI / 180 * 0, Math.PI / 180 * 360);  context.fillStyle = '#fff';  context.fill();   //繪制右下小半圓(黑色)  context.beginPath();  context.arc(400, 550, 35, Math.PI / 180 * 0, Math.PI / 180 * 360);  context.fillStyle = '#000';  context.fill(); }

<div class="animation">    <canvas id="canvas" width="800" height="800"></canvas>  </div>