canvas学习（二）：弹跳小球

效果类似于：将玻璃球摔在地上，小球往上弹，然后越弹越低，最后在地上滚动

页面结构就是在body中添加一个canvas标签，id为myCanvas。

js代码如下：

var WINDOW_Width=1024;//canvas的宽度
var WINDOW_HEIGHT=600;//canvas的高度

//定义小球的初始横坐标、纵坐标、半径、加速度、在x方向的速度、在y方向的速度、填充色
var ball={x:512,y:100,r:20,g:5,vx:-4,vy:0,color:"#005588"};
window.onload=function(){
	var	myCanvas = document.getElementById("myCanvas");
	if(myCanvas.getContext("2d")){
		var context = myCanvas.getContext("2d");//获取绘图上下文环境
		//设置宽高
		myCanvas.width=WINDOW_Width;
		myCanvas.height=WINDOW_HEIGHT;

		setInterval(function(){
			render(context);//绘制小球
			update();//调整小球的坐标来更新小球状态，让其在画布中弹跳
		},50);
		
	}else{
		alert("当前浏览器不支持canvas标签");
	}
}
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();//为小球填充颜色
}

function update(){
	ball.x +=ball.vx;
	ball.y +=ball.vy;
	ball.vy +=ball.g;

	//判断小球是否碰壁，若是碰壁就减小y方向的高度，达到小球越跳越低的效果
	//600是前面设置的canvas的高度
	if(ball.y>=WINDOW_HEIGHT-ball.r){
		ball.y=WINDOW_HEIGHT-ball.r;
		ball.vy = -ball.vy*0.5;//慢慢降低弹跳小球的高度，达到小球越跳越低的效果
	}
}