-_-#【Canvas】圆弧运动

var canvas = document.getElementById('canvas')

var context = canvas.getContext('2d')



var angle = 0



function move() {

    context.clearRect(0,0,canvas.width,canvas.height)



    context.save()

    context.beginPath()

    context.lineWidth = 0.5

    context.strokeStyle = 'red'

    context.arc(canvas.width / 2, canvas.height / 2, 200, 0, Math.PI*2, false)

    context.stroke()

    context.restore()



    context.save()

    context.beginPath()

    context.fillStyle = 'green'

    context.strokeStyle = 'green'

    context.arc(canvas.width / 2 + Math.cos(angle) * 200, canvas.height / 2 + Math.sin(angle) * 200, 5, 0, Math.PI*2, false)

    angle += Math.PI * 2 / 360

    context.stroke()

    context.fill()

    context.restore()



    window.requestAnimationFrame(move)

}



window.requestAnimationFrame(move)