定义和用法
arc() 方法创建弧/曲线（用于创建圆或部分圆）。
提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。
提示：请使用 stroke或 fill方法在画布上绘制实际的弧。
JavaScript 语法
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
效果图
代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>canvas绘制太极图</title><style>/* * {padding: 0;margin: 0;} */#canvas {/* border: 1px solid red; *//* 动画名 运动时间 速度是相同的 无限 */animation: myMove 2s linear infinite;}@keyframes myMove {/* 0%{transform: rotate(360deg);}100%{transform: rotate(0deg);} */from{transform: rotate(360deg);}to{transform: rotate(0deg);}}</style></head><body><!-- 创建一个画布 --><canvas id="canvas" width="400" height="400">您的浏览器不支持canvas，请升级</canvas><script>let canvas = document.getElementById('canvas');let ctx = canvas.getContext('2d');// 1 绘制一个大圆ctx.beginPath();//开启路径ctx.arc(200,200,200,0,2*Math.PI,false);//绘制一个圆 逆时针ctx.closePath();//闭合路径ctx.stroke();//描边// 2 画左边半圆 （从0.5*Math.PI-1.5*Math.PI），颜色填充为黑色ctx.beginPath();ctx.arc(200,200,200,0.5*Math.PI,1.5*Math.PI,false);ctx.closePath();ctx.fillStyle = '#000';//填充颜色ctx.fill();//填充// 3 画左半边上面的半圆（从0-1.5*Math.PI）,颜色填充为白色ctx.beginPath();ctx.arc(200,100,100,0,1.5*Math.PI,false);ctx.closePath();ctx.fillStyle = '#fff';ctx.fill();// 3.1 在上面的半圆内画一个比半圆小的整圆，颜色填充为黑色ctx.beginPath();ctx.arc(200,100,40,0,2*Math.PI);ctx.closePath();ctx.fillStyle = '#000';//填充黑色ctx.fill();// 4 画右半边下面的半圆（从1.5-1*Math.PI）,颜色填充为黑色ctx.beginPath()ctx.arc(200,300,100,0.5*Math.PI,1.5*Math.PI,true);//顺时针方向// ctx.arc(200,300,100,1.5*Math.PI,0.5*Math.PI,false);//逆时针方向ctx.closePath();ctx.fillStyle = '#000';//填充黑色ctx.fill();// 4.1 在下面的半圆内画一个比半圆小的整圆，颜色填充为白色ctx.beginPath();ctx.arc(200,300,40,0,2*Math.PI);ctx.closePath();ctx.fillStyle = '#fff';//填充白色ctx.fill();</script></body></html>
