版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Dj_Fairy/article/details/83790257
canvas实现主要代码
canvas(centerx,centery,radius,startingAngle,endingAngle,antclockwise=false)
canvas(x轴坐标，y轴坐标，角度，开始的角度，结束的角度，顺时针（默认false）/逆时针true)
角度从0开始，一整个圆结束是2PI
demo代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>跳动的小球</title>
</head>
<body>
<canvas id="canvas" style="display:block;margin: 0 auto;border: 1px solid black">
当前浏览器不支持canvas，请更换浏览器再试
</canvas>
<script>
var ball={x:712,y:100,r:20,g:2,vx:-4,vy:-10,color:'red'} //定义球的初始值g：加速度，vx:x轴方向的速度，vy:y轴方向的速度
window.onload=function(){
var canvas=document.getElementById('canvas')
canvas.width=1024;
canvas.height=768;
var context=canvas.getContext('2d') //环境
setInterval(function(){
render(context)
update()
},50)
}
function render(cxt){
cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height)
cxt.beginPath()
cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI)
cxt.fillStyle=ball.color
cxt.fill() //填充
}
function update(){
ball.x+=ball.vx
ball.y+=ball.vy
ball.vy+=ball.g
if(ball.y>=768-ball.r){
ball.y=768-ball.r
ball.vy=-ball.vy*0.5 //到达底部弹起来，*0.5有个缓冲的效果
}
}
</script>
</body>
</html>