备注：本文后面的代码，如果加载了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

[js高手之路]html5 canvas动画教程 - 边界判断与反弹的更多相关文章

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

    备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单 ...

  2. [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标

    有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...

  3. [js高手之路]html5 canvas动画教程 - 下雪效果

    利用canvas,实现一个下雪的效果,我们先预览下效果: 我们先分析下这个效果: 1,随机产生雪花 2,雪花的产生不是同时产生,而是有先后顺序的 3,雪花怎么表示 4,怎么源源不断的下雪 5,雪花有大 ...

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

    综合利用前面所学,实现一个绚丽的小球动画,这个实例用到的知识点,在我的博客全部都有,可以去这里查看所有的canvas教程 <head> <meta charset='utf-8' / ...

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

    匀速运动:指的是物体在一条直线上运动,并且物体在任何相等时间间隔内通过的位移都是相等的.其实就是匀速直线运动,它的特点是加速度为0,从定义可知,在任何相等的时间间隔内,速度大小和方向是相同的. < ...

  6. [js高手之路]html5 canvas动画教程 - 自己动手做一个类似windows的画图软件

    这个绘图工具,我还没有做完,不过已经实现了总架构,以及常见的简易图形绘制功能: 1,可以绘制直线,圆,矩形,正多边形[已完成] 2,填充颜色和描边颜色的选择[已完成] 3,描边和填充功能的选择[已完成 ...

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

    上节,我们讲了匀速运动,本节分享的运动就更有意思了: 加速运动 重力加速度 抛物线运动 摩擦力 加速运动: <head> <meta charset='utf-8' /> &l ...

  8. [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

    本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...

  9. [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

    我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...

随机推荐

  1. HDU4466 Triangle

    题意:给一个长为N的铁丝,问你有几种方法将其划分为若干段,使得每一段都能围成一个边长为整数的三角形,并且围成的三角形都相似 思路其实很明显,三角形的周长必定是N的约数,那么答案就是周长C能围城的三角形 ...

  2. <算法>进制转换超详细

    16转10 用竖式计算: 16进制数的第0位的权值为16的0次方,第1位的权值为16的1次方,第2位的权值为16的2次方 第0位: 5 * 16^0 = 5 第1位: F * 16^1 = 240 第 ...

  3. 如何使用 Secret？- 每天5分钟玩转 Docker 容器技术（108）

    我们经常要向容器传递敏感信息,最常见的莫过于密码了.比如: docker run -e MYSQL_ROOT_PASSWORD=my-secret-pw -d mysql 在启动 MySQL 容器时我 ...

  4. Git 经常使用命令总结

    一 关于加入.删除和回退 1 git rm --cached file  想要git不再跟踪这个文件,可是又不想在硬盘中删除该文件 2 在被git管理的文件夹中删除文件时,能够选择例如以下两种方式: ...

  5. jQuery遮罩层插件

    在网页上常常遇到须要等待非常久的操作,比方导出报表等.为了预防用户点击其它操作或者多次点击同个功能,须要用遮罩层把页面或者操作区盖住.防止用户进行下一步操作.同一时候能够提高界面友好度,让用户知道操作 ...

  6. WPF使用RoutedCommand自己定义命令

    主要代码例如以下所看到的: /// <summary> /// 声明并定义命令. /// </summary> RoutedCommand ClearCommand = new ...

  7. python3.5新增函数isclose的使用

    前言:python3.5的math模块新增一个isclose函数用来判断两个浮点数的值是否接近或相等,这是由于浮点数的计算总是存在一定的误差.下面谈一下用法: import math print(ma ...

  8. 数据库——MongoDB——>Java篇

         MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案.      MongoDB  是一个介于关系数据库和非关系数据库之间的产 ...

  9. 《修改代码的艺术》【PDF】下载

    <修改代码的艺术>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382309 内容简介 <修改代码的艺术>针对大型的. ...

  10. JMeter获取JSON内容

    source("D:\\apache-jmeter-3.0\\用例\\Test.java"); public static void f(){ String response_da ...