
</canvas>
<script>
window.onload=function(){
var mycanvas=document.getElementById("mycanvas");
var cxt=mycanvas.getContext("2d");
// 上半圆
cxt.beginPath();
cxt.arc(200,200,100,0,Math.PI,true);
cxt.fillStyle="white";
cxt.fill();
cxt.closePath();
// 下半圆
cxt.beginPath();
cxt.arc(200,200,100,0,Math.PI,false);
cxt.fillStyle="black";
cxt.fill();
cxt.closePath();
// 上半圆中半圆
cxt.beginPath();
cxt.arc(150,200,50,0,Math.PI,true);
cxt.fillStyle="black";
cxt.fill();
cxt.closePath();
// 下半圆中半圆
cxt.beginPath();
cxt.arc(250,200,50,0,Math.PI,false);
cxt.fillStyle="white";
cxt.fill();
cxt.closePath();
// 上半圆中圆
cxt.beginPath();
cxt.arc(250,175,25,0,2*Math.PI,true);
cxt.fillStyle="black";
cxt.fill();
cxt.closePath();
// 下半圆中圆
cxt.beginPath();
cxt.arc(150,225,25,0,2*Math.PI,true);
cxt.fillStyle="white";
cxt.fill();
cxt.closePath();
}
</script>