js代码
let canEle = document.getElementsByTagName('canvas');
let pen = canEle .getContext('2d');
pen.beginPath();
pen.arc(200, 200, 200, Math.PI * 1.5, Math.PI * 0.5);
pen.strokeStyle = 'black';
pen.stroke();
pen.beginPath();
pen.arc(200, 200, 200, Math.PI * 0.5, Math.PI * 1.5);
pen.fillStyle = 'black';
pen.fill();
pen.stroke();
pen.beginPath();
pen.arc(200, 100, 100, Math.PI * 0.5, Math.PI * 1.5);
pen.fillStyle = 'white';
pen.fill();
pen.stroke();
pen.beginPath();
pen.arc(200, 300, 100, Math.PI * 1.5, Math.PI * 0.5);
pen.fillStyle = 'black';
pen.fill();
pen.stroke();
pen.beginPath();
pen.arc(200, 300, 20, 0, Math.PI * 2);
pen.fillStyle = 'white';
pen.fill();
pen.stroke();
pen.beginPath();
pen.arc(200, 100, 20, 0, Math.PI * 2);
pen.fillStyle = 'black';
pen.fill();
pen.stroke();
效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e85b5fc258160fbbdbf83d2592211815.png)