[js高手之路]html5 canvas动画教程 - 边界判断与反弹 - ghostwu_H5之家

备注：本文后面的代码，如果加载了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 ); ( ball.x < ball.radius ) { 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></canvas> 45 </body>

原理跟之前写的文章[js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果差不多，只是在碰到边界的时候，把速度调成反向的，小球就会反弹.

run code

多个物体的反弹

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); (ball.x < ball.radius) { 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></canvas> 55 </body>

原理是一样的，只是把坐标和速度的判断，基于一个个小球对象.

run code