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>