备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码.
边界反弹:
当小球碰到canvas的四个方向的时候,保持位置不变,把速度变成相反的方向
1 <head>
2 <meta charset='utf-8' />
3 <style>
4 #canvas {
5 border: 1px dashed #aaa;
6 }
7 </style>
8 <script src="./ball.js"></script>
9 <script>
10 window.onload = function () {
11 var oCanvas = document.querySelector("#canvas"),
12 oGc = oCanvas.getContext('2d'),
13 width = oCanvas.width, height = oCanvas.height,
14 ball = new Ball(width / 2, height / 2),
15 vx = Math.random() * 2 5,
16 vy = Math.random() * 2 5;
17 ball.fill(oGc);
18 ( function move(){
19 oGc.clearRect( 0, 0, width, height );
20 ball.x = vx;
21 ball.y = vy;
22 ball.fill( oGc );
23
24 if ( ball.x < ball.radius ) { //碰到左边的边界
25 ball.x = ball.radius;
26 vx = -vx;
27 }else if ( ball.y < ball.radius ){
28 ball.y = ball.radius;
29 vy = -vy;
30 }else if ( ball.x > width - ball.radius ){
31 ball.x = width - ball.radius;
32 vx = -vx;
33 }else if ( ball.y > height - ball.radius ){
34 ball.y = height - ball.radius;
35 vy = -vy;
36 }
37 requestAnimationFrame( move );
38 } )();
39 }
40 </script>
41 </head>
42
43 <body>
44 <canvas id="canvas" width="1200" height="600"></canvas>
45 </body>
原理跟之前写的文章[js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果差不多,只是在碰到边界的时候,把速度调成反向的,小球就会反弹.
多个物体的反弹
1 <head>
2 <meta charset='utf-8' />
3 <style>
4 #canvas {
5 border: 1px dashed #aaa;
6 }
7 </style>
8 <script src="./ball.js"></script>
9 <script>
10 window.onload = function () {
11 var oCanvas = document.querySelector("#canvas"),
12 oGc = oCanvas.getContext('2d'),
13 width = oCanvas.width, height = oCanvas.height,
14 balls = [], n = 50;
15 function getRandColor() {
16 return '#' (function (color) {
17 return (color = '0123456789abcdef'[Math.floor(Math.random() * 16)]) && (color.length == 6) ? color : arguments.callee(color);
18 })('');
19 }
20 for (var i = 0; i < n; i ) {
21 var ball = new Ball(width / 2, height / 2, 20, getRandColor());
22 ball.vx = (Math.random() * 2 - 1) * 5;
23 ball.vy = (Math.random() * 2 - 1) * 5;
24 balls.push(ball);
25 }
26 (function move() {
27 oGc.clearRect(0, 0, width, height);
28 balls.forEach(function (ball) {
29 ball.x = ball.vx;
30 ball.y = ball.vy;
31 ball.fill(oGc);
32
33 if (ball.x < ball.radius) { //碰到左边的边界
34 ball.x = ball.radius;
35 ball.vx = -ball.vx;
36 } else if (ball.y < ball.radius) {
37 ball.y = ball.radius;
38 ball.vy = -ball.vy;
39 } else if (ball.x > width - ball.radius) {
40 ball.x = width - ball.radius;
41 ball.vx = -ball.vx;
42 } else if (ball.y > height - ball.radius) {
43 ball.y = height - ball.radius;
44 ball.vy = -ball.vy;
45 }
46 });
47 requestAnimationFrame(move);
48 })();
49 }
50 </script>
51 </head>
52
53 <body>
54 <canvas id="canvas" width="1200" height="600"></canvas>
55 </body>
原理是一样的,只是把坐标和速度的判断,基于一个个小球对象.