# canvas基础作图-一个小球的坠落、反弹

www.MyException.Cn  网友分享于：2013-09-28  浏览：0次
canvas基础绘制-一个小球的坠落、反弹

html：

```<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Title</title>
<body>
<canvas id="canvas" style="border: 1px solid #ddd"></canvas>
<script src="ball.js"></script>
</body>
</html>```

ball.js:

```var ball = {x:512,y:100,r:20,g:2,vx:10,vy:0,color:"#058"};

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

canvas.width = 1024;
canvas.height = 768;

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

function update() {
ball.x+=ball.vx;
ball.y+=ball.vy;
ball.vy+=ball.g;
}
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();
}```

ball.js:

```//更新function update() {
ball.x+=ball.vx;
ball.y+=ball.vy;
ball.vy+=ball.g;

if(ball.y>=canvas.height-ball.r){//小球接触底边沿反弹
// ball.vy = -ball.vy*0.5;
ball.vy = -ball.vy;
}else if(ball.x>=canvas.width-ball.r){
ball.vx = -ball.vx;
}else if(ball.x<=ball.r) {
ball.vx = -ball.vx;
}else if(ball.y<=ball.r){
ball.vy = -ball.vy;
}

}```