H5 canvas-小球抛物线

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas-小球抛物线</title>
</head>
<body>
	<canvas id="canvas" width="1024px" height="768px;" style="border: 1px solid #000;"></canvas>
<script>
var ball = {x:512 , y:100 , r:20 ,g:2 , vx :-4 ,vy:0 , color:"#005588"}
	window.onload = function(){
		var canvas = document.getElementById('canvas');
		canvas.width = 1024;
		canvas.height = 768;
		var cxt = canvas.getContext("2d");

		setInterval(function(){
			render(cxt);
			update()
		},50)

		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
			}
		}
		function render(cxt){
			cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height)
			cxt.fillStyle = ball.color
			cxt.beginPath()
			cxt.arc(ball.x,ball.y , ball.r , 0,2*Math.PI)
			cxt.closePath()

			cxt.fill()
		}
	}
</script>
</body>
</html>