canvas基础绘制-一个小球的坠落、反弹

效果如图：

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<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"};

window.onload = function () {
    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();
}

小球反弹了：

canvas基础绘制-一个小球的坠落、反弹

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;
    }

}