console 命令行工具 X clear
console
<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas">your browser does not support the canvas tag </canvas>

<script type="text/javascript">

var myCanvas = document.getElementById("myCanvas")

if(myCanvas.getContext){
   var ctx = myCanvas.getContext("2d")
}
// ctx.fillStyle = 'red'
// ctx.fillRect(0,0,60,60)

// ctx.strokeStyle = "blue"
// ctx.arc(100,60,50,0,2*Math.PI,true)
// ctx.stroke()

// 左边黑色圆
ctx.fillStyle = "black"
// ctx.strokeStyle= "#ffffff"
ctx.arc(200,100,50,Math.PI/2,3*Math.PI/2,false)
ctx.fill()

// 右边白色圆
ctx.beginPath()
ctx.fillStyle = "white"
// ctx.strokeStyle= "#ffffff"
ctx.arc(200,100,50,3*Math.PI/2,Math.PI/2,false)
ctx.fill()

// 上面白色小圆
ctx.beginPath()
ctx.fillStyle = "white"
// ctx.strokeStyle= "#ffffff"
ctx.arc(200,75,25,0,2*Math.PI,false)
ctx.fill()

// 下面黑色小圆

ctx.beginPath()
ctx.fillStyle = "black"
// ctx.strokeStyle= "#ffffff"
ctx.arc(200,125,25,0,2*Math.PI,false)
ctx.fill()

ctx.beginPath()
ctx.fillStyle = "black"
// ctx.strokeStyle= "#ffffff"
ctx.arc(200,75,12.5,0,2*Math.PI,false)
ctx.fill()

ctx.beginPath()
ctx.fillStyle = "white"
// ctx.strokeStyle= "#ffffff"
ctx.arc(200,125,12.5,0,2*Math.PI,false)
ctx.fill()

console.log(ctx)   
</script>

</body>
</html>