html5简单的小球撞墙的动画

直接输入代码,看看效果吧!~ 里面我都详细的注释了!~ 看代码比较直观

—————————————————————————————————

<!DOCTYPE html>
<html>
<head>
<>
<style>
body {margin:0; position:absolute; width:100%; height:100%}
canvas {display: block; margin: 20px auto; border: 1px solid #333}
</style>
<script>
var BounceBall = function () {
//ctx 这是context对象,W是框的宽度,H是框的高度,dx是宽度每次增加多少,dy是高度每次增加多少
//x是起始的x的坐标,y是起始的y的坐标

var ctx, W, H, dx = 2, dy = 4, x = 100, y = 200;
var init = function (id) {
var canvas = document.getElementById(id);
ctx = canvas.getContext(’2d’);
W = canvas.width; //得到画布的X的大小 可以使用 canvas.getAttribute(“width”);
H = canvas.height; // 得到画布的y的大小 可以使用 canvas.getAttribute(“height”);
this.run(); //调用run()方法
}

init.prototype = {

run: function () {
var init_this = this;
//通过setInterval来控制
this.st = setInterval(function () {
init_this.draw();
}, 16)
},
draw: function () {
this.clear(); //清除画布,以便重绘,每次是这样
this.circle(x, y, 8); //重绘小球
// 边界碰撞
if (x + dx > W || x + dx < 0) dx = -dx; //如果在x方向不能走的话,就开始反方向走
if (y + dy > H || y + dy < 0) dy = -dy;//如果在y方向不能走的话,就开始反方向走
x += dx; // x 方向变化
y += dy; // y 方向变化
},
clear : function () {
ctx.clearRect(0, 0, W, H);//清楚画布的方法,如果把这一句注释掉,就会产生连续的点
},
//画出小球
circle : function (x, y, r) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}
}
return init;
}();

onload = function () {
new BounceBall(‘canvas’);//new的时候,相当于调用里面prototype,最后返回init,执行init方法
}
</script>
</head>
<body>
<canvas id=”canvas” width=”600″ height=”300″>Your Broswer don’t support html5 canvas<canvas>
</body>
</html>

——————————————————————————————————————-

查看效果:http://www.cangzhang.com/wp-content/uploads/2012/08/Ball.htm

共有 0 条评论

Top