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

作者:分分快三计划

当小球蒙受canvas的七个样子的时候,保持地方不改变,把速度形成相反的取向

备注:本文前边的代码,如果加载了ball.js,那么请使用那篇小说[js高手之路] html5 canvas动漫教程 - 匀速运动的ball.js代码.

 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>

 

 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>

run code

<head> <meta charset='utf-8' /> <style> #canvas { border: 1px dashed #aaa; } </style> <script> function Ball(x, y, r, color) { this.x = x || 0; this.y = y || 0; this.radius = r || 20; this.color = color || '#09f'; } Ball.prototype = { constructor: Ball, stroke: function (cxt) { cxt.strokeStyle = this.color; cxt.beginPath(); cxt.arc(this.x, this.y, this.radius, 0, 2 * Math.PI); cxt.closePath(); cxt.stroke(); }, fill: function (cxt) { cxt.fillStyle = this.color; cxt.beginPath(); cxt.arc(this.x, this.y, this.radius, 0, 2 * Math.PI); cxt.closePath(); cxt.fill(); } } </script> <script> window.onload = function () { var oCanvas = document.querySelector("#canvas"), oGc = oCanvas.getContext('2d'), width = oCanvas.width, height = oCanvas.height, ball = new Ball(width / 2, height / 2), vx = Math.random() * 2 5, vy = Math.random() * 2 5; ball.fill(oGc); (function move() { oGc.clearRect(0, 0, width, height); ball.x = vx; ball.y = vy; ball.fill(oGc); if (ball.x < ball.radius) { //蒙受左边的界线 ball.x = ball.radius; vx = -vx; } else if (ball.y < ball.radius) { ball.y = ball.radius; vy = -vy; } else if (ball.x > width - ball.radius) { ball.x = width - ball.radius; vx = -vx; } else if (ball.y > height - ball.radius) { ball.y = height - ball.radius; vy = -vy; } requestAnimationFrame(move); })(); } </script> </head> <body> <canvas id="canvas" width="1200" height="600"></canvas> </body>

原理是均等的,只是把坐标和速度的决断,基于三个个小球对象.

 原理跟以前写的篇章[js高手之路]html5 canvas动漫教程 - 边界推断与小球粒子模拟喷泉,散弹效果差不离,只是在境遇边界的时候,把速度调成反向的,小球就能够反弹.

run code

 四个物体的反弹

<head> <meta charset='utf-8' /> <style> #canvas { border: 1px dashed #aaa; } </style> <script> function Ball(x, y, r, color) { this.x = x || 0; this.y = y || 0; this.radius = r || 20; this.color = color || '#09f'; } Ball.prototype = { constructor: Ball, stroke: function (cxt) { cxt.strokeStyle = this.color; cxt.beginPath(); cxt.arc(this.x, this.y, this.radius, 0, 2 * Math.PI); cxt.closePath(); cxt.stroke(); }, fill: function (cxt) { cxt.fillStyle = this.color; cxt.beginPath(); cxt.arc(this.x, this.y, this.radius, 0, 2 * Math.PI); cxt.closePath(); cxt.fill(); } } </script> <script> window.onload = function () { var oCanvas = document.querySelector("#canvas"), oGc = oCanvas.getContext('2d'), width = oCanvas.width, height = oCanvas.height, balls = [], n = 50; function getRandColor() { return '#' (function (color) { return (color = '0123456789abcdef'[Math.floor(Math.random() * 16)]) && (color.length == 6) ? color : arguments.callee(color); })(''); } for (var i = 0; i < n; i ) { var ball = new Ball(width / 2, height / 2, 20, getRandColor()); ball.vx = (Math.random() * 2 - 1) * 5; ball.vy = (Math.random() * 2 - 1) * 5; balls.push(ball); } (function move() { oGc.clearRect(0, 0, width, height); balls.forEach(function (ball) { ball.x = ball.vx; ball.y = ball.vy; ball.fill(oGc); if (ball.x < ball.radius) { //蒙受左边手的界限 ball.x = ball.radius; ball.vx = -ball.vx; } else if (ball.y < ball.radius) { ball.y = ball.radius; ball.vy = -ball.vy; } else if (ball.x > width - ball.radius) { ball.x = width - ball.radius; ball.vx = -ball.vx; } else if (ball.y > height

  • ball.radius) { ball.y = height - ball.radius; ball.vy = -ball.vy; } }); requestAnimationFrame(move); })(); } </script> </head> <body> <canvas id="canvas" width="1200" height="600"></canvas> </body>

边界反弹:

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划