canvas画太极，上圆心只显示一半怎么解决？
想在页面显示一个太极，但最终效果与自己想的不一致，如图
太极HTML侧只有一个canvas标签，设置了样式，JS源代码如下：
// 【1.获取画布节点】
let cavEle = document.querySelector('canvas');
//【2.获取绘制图形的上下文，同时创建画笔】
let pen = cavEle.getContext('2d');
//【太极圆】
// 右外圆
let Pai = Math.PI;
pen.beginPath();
pen.arc(200,200,160,Pai/180*270,Pai/180*450);
pen.stroke();
pen.fillStyle="white";//颜色
pen.fill();
// 上圆弧
pen.beginPath();
pen.arc(200,120,80,Pai/180*90,Pai/180*270,true);
pen.fillStyle="black";
pen.fill();
//上圆心
pen.beginPath();
pen.arc(200,120,30,0,2*Pai);
pen.fillStyle="white";
pen.fill();
// 左外圆
pen.beginPath();
pen.arc(200,200,160,Pai/180*90,Pai/180*270);
pen.stroke();
pen.fillStyle="black";//颜色
pen.fill();
//下圆弧
pen.beginPath();
pen.arc(200,280,80,Pai/180*270,Pai/180*450,true);
pen.fillStyle="white";
pen.fill();
//下圆心
pen.beginPath();
pen.arc(200,280,30,0,2*Pai);
pen.fillStyle="black";
pen.fill();最开始检查以为是上圆心原本就只有一半的圆，但最终检查结果为上圆心是完整的圆，但只显示一半，即，上圆心的另一半，被上半部分的圆遮挡住了，但不知道原因，想问下大家有没有能给我解惑一下的，万分感谢！
注：下圆心与上圆心书写格式一致，但下圆心是完整的，但上圆心只有一半
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" height="800" width="800"></canvas>
<script>
// 【1.获取画布节点】
let cavEle = document.querySelector('canvas');
//【2.获取绘制图形的上下文，同时创建画笔】
let pen = cavEle.getContext('2d');
//【太极圆】
// 右外圆
let Pai = Math.PI;
pen.beginPath();
pen.arc(200,200,160,Pai/180*270,Pai/180*450);
pen.stroke();
pen.fillStyle="white";//颜色
pen.fill();
// 上圆弧
pen.beginPath();
pen.arc(200,120,80,Pai/180*90,Pai/180*270,true);
pen.fillStyle="black";
pen.fill();
// 左外圆
pen.beginPath();
pen.arc(200,200,160,Pai/180*90,Pai/180*270);
pen.stroke();
pen.fillStyle="black";//颜色
pen.fill();
//下圆弧
pen.beginPath();
pen.arc(200,280,80,Pai/180*270,Pai/180*450,true);
pen.fillStyle="white";
pen.fill();
//上圆心
pen.beginPath();
pen.arc(200,120,30,0,2*Pai);
pen.fillStyle="white";
pen.fill();
//下圆心
pen.beginPath();
pen.arc(200,280,30,0,2*Pai);
pen.fillStyle="black";
pen.fill();
</script>
</body>
</html>如有帮助请采纳，谢谢。
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="600" height="400" style="background-color: #EED2EE; ">
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
//绘制左侧的白色半圆直径都是150
cxt.fillStyle = "#FFFFFF";
cxt.beginPath();
cxt.arc(300, 200, 150, 1.5 * Math.PI, Math.PI / 2, false);
cxt.closePath();
cxt.fill();
//绘制右侧的黑色半圆
cxt.fillStyle = "#000000";
cxt.beginPath();
cxt.arc(300, 200, 150, Math.PI / 2, 1.5 * Math.PI, false);
cxt.closePath();
cxt.fill();
//绘制下面的黑色圆
cxt.fillStyle = "#000000";
cxt.beginPath();
cxt.arc(300, 275, 75, 0, 2 * Math.PI, false);
cxt.closePath();
cxt.fill();
//绘制上面的白色圆
cxt.fillStyle = "#FFFFFF";
cxt.beginPath();
cxt.arc(300, 125, 75, 0, 2 * Math.PI, false);
cxt.closePath();
cxt.fill();
//绘制两个小圆
cxt.fillStyle = "FFFFFF";
cxt.beginPath();
cxt.arc(300, 275, 10, 0, 2 * Math.PI, false);
cxt.closePath();
cxt.fill();
//绘制黑色小圆
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(300, 125, 10, 0, 2 * Math.PI, false);
cxt.closePath();
cxt.fill();
</script>
</body>
</html>这是我写的太极，希望能给你启发，万望采纳
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas绘画太极图</title>
</head>
<body>
<canvas id="canvas" width="800" height="800"></canvas>
<!--结合js使用
使用方法：
1.得到画布对象
2.以2d方式绘制 -->
<script type="text/javascript">
//绘制圆形
// arc(x, y, radius, startAngle, endAngle, anticlockwise)
//x坐标,y坐标,半径,起始位置,结束位置,方向,(顺时针false，逆时针true)
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//外轮廓 左半圆白
context.beginPath();
context.arc(400, 400, 300, Math.PI*0.5, Math.PI*1.5);
context.fillStyle = "#FFF";
context.fill();
//外轮廓 左半圆黑
context.beginPath();
context.arc(400, 400, 300, Math.PI*1.5, Math.PI*0.5);
context.fillStyle = "#000";
context.fill();
//上半圆 黑
context.beginPath();
context.arc(400, 250, 150, Math.PI*0.5, Math.PI*1.5);
context.fillStyle = "#000";
context.fill();
//下半圆 白
context.beginPath();
context.arc(400, 550, 150, Math.PI*1.5, Math.PI*0.5);
context.fillStyle = "#FFF";
context.fill();
//上实心圆 白
context.beginPath();
context.arc(400, 250, 50, 0, Math.PI*2);
context.fillStyle = "#FFF";
context.fill();
//下实心圆 黑
context.beginPath();
context.arc(400, 550, 50, 0, Math.PI*2);
context.fillStyle = "#000"; //填充样式
context.fill(); //绘制填充
//优化 整体边框 黑
context.beginPath();
context.arc(400, 400, 300, 0, Math.PI*2);
context.strokeStyle="#000"; //边框样式
context.lineWidth = 2; //设置线条粗细为2px
context.stroke(); //边框绘制
</script>
</body>
</html>
如有帮助，望采纳，谢谢
您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~
如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～
ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632