首页 > 网站 > WEB开发 > 正文

-_-#【Canvas】圆弧运动

2024-04-27 14:16:18
字体:
来源:转载
供稿:网友

-_-#【Canvas】圆弧运动

var canvas = document.getElementById('canvas')var context = canvas.getContext('2d')var angle = 0function 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)


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表