效果如图：
代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}div {width: 600px;height: 600px;background-color: #C1C1C1;text-align: center;margin: 0 auto;margin-top: 50px;}#canvas {margin-top: 100px;animation: anima 2s infinite linear;}@keyframes anima {0% {transform:rotate(0deg);}/* 33%{transform:rotate(120deg);}66%{transform:rotate(240deg);} */100% {transform:rotate(360deg);}}</style></head><body><div><canvas id="canvas" width="400px" height="400px"></canvas></div></body><script>window.onload = function () {var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');//先画一个大圆context.beginPath();context.arc(200, 200, 200, 0, 2 * Math.PI, false);context.closePath();context.fillStyle = "#fff";context.lineWidth = 1;context.fill();//画左半边的半圆（从0.5*Math.PI-1.5*Math.PI）,颜色填充为黑色context.beginPath();context.arc(200, 200, 200, 0.5 * Math.PI, 1.5 * Math.PI, false);context.closePath();context.fillStyle = "#000";context.fill();//画左半边上面的半圆（从0.5*Math.PI-1.5*Math.PI）,颜色填充为白色context.beginPath();context.arc(200, 100, 100, 0.5 * Math.PI, 1.5 * Math.PI, false);context.closePath();context.fillStyle = "#fff";context.fill();//画右半边下面的半圆（从0.5*Math.PI-1.5*Math.PI）,颜色填充为黑色context.beginPath();context.arc(200, 300, 100, 0.5 * Math.PI, 1.5 * Math.PI, true);context.closePath();context.fillStyle = "#000";context.fill();//在上面的半圆内画一个比半圆小的整圆,颜色填充为黑色context.beginPath();context.arc(200, 100, 30, 0, 2 * Math.PI, false);context.closePath();context.fillStyle = "#000";context.fill();//在下面的半圆内画一个比半圆小的整圆,颜色填充为白色context.beginPath();context.arc(200, 300, 30, 0, 2 * Math.PI, false);context.closePath();context.fillStyle = "#fff";context.fill();}</script><!-- canvas arc()的用法 地址 --><!-- /tags/canvas_arc.asp --></html>
