备注：本文后面的代码，如果加载了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. Java中的比较总结

    Java中的比较问题是一个很基础又很容易混淆的问题.今天就几个容易出错的点作一个比较详细的归纳与整理,希望对大家的学习与面试有帮助. 一.==与equals()的区别 首先,我们需要知道==与equa ...

  2. 基于iTextSharp的PDF文档操作

    公司是跨境电商,需要和各种物流打交道,需要把东西交给物流,让他们发到世界各地.其中需要物流公司提供一个运单号,来追踪货物到达哪里?! 最近在和DHL物流公司(应该是个大公司)对接,取运单号的方式是调用 ...

  3. gtk+3.0的环境配置及基于gtk+3.0的python简单样例

    /*********************************************************************  * Author  : Samson  * Date   ...

  4. UVa 10170 - The Hotel with Infinite Rooms

    题目:求从s開始的递增序列(每次加1).求出他们加和不小于D的那个最后的加数. 分析:数学题.分治.s + s+1 + ... + n = n*(n+1)/2 - s*(s-1)/2 = (n+s)* ...

  5. 体验CSDN-Markdown

    文件夹 文件夹 文本格式化练习 一号标题 1一号标题 二号标题 1 11 2 列表的应用 链接 图片 脚注 表格 序列图 流程图 文本格式化练习: 斜体 斜体的文字 使用鼠标,变成斜体文字 使用键盘C ...

  6. 兔子-ps抠图

    介绍2种方法:1.用高速选择工具 2.用铅笔工具 1.高速选择后.ctrl+c复制,新建空白图片,粘贴进去 2.用钢笔工具在图像的边缘定出若二个点,确定完毕之后按crtl+回车键选择.然后复制,新建空 ...

  7. ThoughtWorks 2017技术雷达

    前言: ThoughtWorks人酷爱技术.我们对技术进行构建.研究. 测试.开源.记述,并始终致力于对其进行改进-以求造福 大众.我们的使命是支持卓越软件并掀起IT革命.我们创建 并分享Though ...

  8. jQuery 插件 Magnify 开发简介（仿 Windows 照片查看器）

    前言 因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽.调整大小.最大化, ...

  9. Netty学习笔记（一）：接收nodejs模拟表单上传的文件

    好久不写博客了,也好久不写代码了,这两天临时遇上一个事情,觉得不难,加上觉得手有些生,就动手做了一下,结果遇上了不少坑,有新坑,有老坑,痛苦无比,现在总算差不多了,赶紧记录下来,希望以后不再重复这种痛 ...

  10. Java之数据类型，变量赋值

    Java中的基础数据类型(四类八种): 1.整数型 byte----使用byte关键字来定义byte型变量,可以一次定义多个变量并对其进行赋值,也可以不进行赋值.byte型是整型中所分配的内存空间是最 ...