先在HTML5页面添加canvas 元素

<body>
<canvas id="box" width='800' height='800'><canvas>
</body>

然后用JS画图

canvas 元素本身是没有画图能力的。所有的绘制必须在 JavaScript 内部完成：
getContext('2d') 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法.

<script>
var c = document.querySelector('#box') //先获取canvas元素
var ctx = c.getContext('2d')  //创建 context 对象
ctx.translate(500, 500)
setInterval(function () {
    //黑色半圆
    ctx.rotate(Math.PI / 180)
    ctx.beginPath()
    ctx.arc(0, 0, 250, 0, Math.PI, false)
    ctx.closePath()
    ctx.fill()
    //四分之一处黑色整圆
    ctx.beginPath()
    ctx.arc(-125, 0, 125, 0, Math.PI * 2, true)
    ctx.closePath()
    ctx.fillStyle = "black"
    ctx.fill()
    // 四分之三处白色整圆
    ctx.beginPath()
    ctx.arc(125, 0, 125, 0, Math.PI * 2, false)
    ctx.closePath()
    ctx.fillStyle = "#fff"
    ctx.fill()
    //在绘制整圆
    ctx.beginPath()
    ctx.arc(-125, 0, 50, 0, Math.PI * 2, true)
    ctx.closePath()
    ctx.fillStyle = "#fff"
    ctx.fill()
    //在绘制整圆
    ctx.beginPath()
    ctx.arc(125, 0, 50, 0, Math.PI * 2, false)
    ctx.closePath()
    ctx.fillStyle = "black"
    ctx.fill()
}, 10)
</script>