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

2022-10-03 15:09:58

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

边界反弹：

当小球碰到canvas的四个方向的时候，保持位置不变，把速度变成相反的方向

 <head>

     <meta charset='utf-8' />

     <style>

         #canvas {

             border: 1px dashed #aaa;

         }

     </style>

     <script src="./ball.js"></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动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果差不多，只是在碰到边界的时候，把速度调成反向的，小球就会反弹.

<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>
run code

多个物体的反弹

 <head>

     <meta charset='utf-8' />

     <style>

         #canvas {

             border: 1px dashed #aaa;

         }

     </style>

     <script src="./ball.js"></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>

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

<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>
run code

码农公寓

相关文章