HTML5技术

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

字号+ 作者:H5之家 来源:H5之家 2017-10-10 18:01 我要评论( )

备注: 本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单的边界判断,所谓边界判断:就是把物体的运动限定在一个范围内.我们先来一个简

备注:本文后面的代码,如果加载了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的中心点,不停的向四周发射小球,形成散弹的效果. 

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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • [js高手之路]html5 canvas动画教程 - 跟着鼠标移动消失的一堆炫彩小球 - ghostwu

    [js高手之路]html5 canvas动画教程 - 跟着鼠标移动消失的一堆炫彩小

    2017-10-11 16:14

  • [js高手之路]html5 canvas动画教程 - 重力、摩擦力、加速、抛物线运动 - ghostwu

    [js高手之路]html5 canvas动画教程 - 重力、摩擦力、加速、抛物线运

    2017-10-10 09:01

  • [js高手之路] html5 canvas动画教程 - 匀速运动 - ghostwu

    [js高手之路] html5 canvas动画教程 - 匀速运动 - ghostwu

    2017-10-09 12:00

  • [js高手之路] html5 canvas教程 - 绘制七巧板 - ghostwu

    [js高手之路] html5 canvas教程 - 绘制七巧板 - ghostwu

    2017-10-09 12:00

网友点评