[js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果 - ghostwu_H5之家

备注：本文后面的代码，如果加载了ball.js，那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码.

本文，我们要做点有意思的效果，首先，来一个简单的边界判断，所谓边界判断：就是把物体的运动限定在一个范围内.我们先来一个简单的实例，在canvas上生成一个小球，小球的初始位置是在canvas的正中间，然后通过键盘的上下左右来移动小球的位置，如果小球碰到canvas的左边，那么不能再向左运动，其他方向同理.

要实现这个效果，只需要一个边界判断，即可。

1 function checkBorder() { ball.x = ball.radius; ball.y = ball.radius; ball.x = width - ball.radius; 8 }else if ( ball.y > height - ball.radius ){ 9 ball.y = height - ball.radius; 10 } 11 }

左边界：只要判断小球的圆心x 如果小于小球的半径，那肯定是碰到了左边界，我们就让小球的中心x等于小球的半径。

右边界：只要判断小球的圆心x 如果大于canvas的宽度减去小球的半径，那肯定是碰到了右边界，我们就让小球的中心x等于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 ball.fill( oGc ); 16 addEventListener("keydown", function (ev) { 17 oGc.clearRect(0, 0, width, height); 18 var oEvent = ev || event; 19 switch (oEvent.keyCode) { 20 case 37: 21 ball.x -= 5; 22 checkBorder(); 23 ball.fill(oGc); 24 break; 25 case 39: 26 ball.x += 5; 27 checkBorder(); 28 ball.fill(oGc); 29 break; 30 case 38: 31 ball.y -= 5; 32 checkBorder(); 33 ball.fill(oGc); 34 break; 35 case 40: 36 ball.y += 5; 37 checkBorder(); 38 ball.fill(oGc); 39 break; 40 } 41 }, false); 42 function checkBorder() { ball.x = ball.radius; ball.y = ball.radius; ball.x = width - ball.radius; 49 }else if ( ball.y > height - ball.radius ){ 50 ball.y = height - ball.radius; 51 } 52 } 53 } 54 </script> 55 </head> 56 57 <body> 58 <canvas></canvas> 59 </body>

边界穿透：

如果小球向左运动，且完全超出左边界，我们就让他从右边出来，如果小球向右运动，且完全超出右边界，我们就让他从左边出来。上下方向同理

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 ball.fill(oGc); 16 addEventListener("keydown", function (ev) { 17 oGc.clearRect(0, 0, width, height); 18 var oEvent = ev || event; 19 switch (oEvent.keyCode) { 20 case 37: 21 ball.x -= 5; 22 checkBorder(); 23 ball.fill(oGc); 24 break; 25 case 39: 26 ball.x += 5; 27 checkBorder(); 28 ball.fill(oGc); 29 break; 30 case 38: 31 ball.y -= 5; 32 checkBorder(); 33 ball.fill(oGc); 34 break; 35 case 40: 36 ball.y += 5; 37 checkBorder(); 38 ball.fill(oGc); 39 break; 40 } 41 }, false); 42 function checkBorder() { ball.x = width + ball.radius; } ball.y = height + ball.radius;} ball.x = -ball.radius;} ball.y = -ball.radius; } 52 } 53 } 54 </script> 55 </head> 56 57 <body> 58 <canvas></canvas> 59 </body>

散弹效果：

通过canvas的中心点，不停的向四周发射小球，形成散弹的效果.

我不知道你们有没有这样的误区：不停的向四周发射小球，那是不是要不停的创造小球呢？如果你这样想，程序就算写出来了，肯定会卡死.