-_-#【Canvas】圆弧运动_2d



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)