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

    链接:在线jQueryhttp://www.bootcdn.cn   一.each(遍历)   $("ul li").each(function(index,value){ ale ...

  2. Sagit.Framework For IOS 开发框架入门开发教程1：框架下载与环境配置

    背景: 前天开源了框架:开源:Sagit.Framework For IOS 开发框架 所以注定要追补一套开发教程了,所以尽量抽空了!!! 步骤 1:下载框架源码 GitHub:https://git ...

  3. Codeforces 869E The Untended Antiquity

    题意:给定一个网格图,三种操作:1.在(r1,c1,r2,c2)处建围墙.2.删除(r1,c1,r2,c2)处的围墙.3.询问两点是否可达 思路比较巧妙,将围墙内的点赋加一个权值,询问的时候判断两个点 ...

  4. SpringData 基于SpringBoot快速入门

    SpringData 基于SpringBoot快速入门 本章通过学习SpringData 和SpringBoot 相关知识将面向服务架构(SOA)的单点登录系统(SSO)需要的代码实现.这样可以从实战 ...

  5. 基于百度地图SDK和Elasticsearch GEO查询的地理围栏分析系统（1）

    本文描述了一个系统,功能是评价和抽象地理围栏(Geo-fencing),以及监控和分析核心地理围栏中业务的表现. 技术栈:Spring-JQuery-百度地图WEB SDK 存储:Hive-Elast ...

  6. C# (using Newtonsoft.Json) Json 转换用法小总结

    //序列化 string Json字符串 = JsonConvert.SerializeObject(目标对象); // 字符串转化为对象 string UserJson = "{\&quo ...

  7. C++ 函数对象

    函数对象 c++中函数名后的()称为函数调用运算符.函数调用运算符也可以重载,如果某个类重载了函数调用运算符,则该类的实例就是一个函数对象.函数对象本身并不是很有用,但他们使得算法操作的参数化策略成为 ...

  8. Java代码操作SVN

    package com.leadbank.oprPlatform.util;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import ...

  9. Excel大写和小写转换函数

    Excel中的大写和小写转换函数 (1).转换为所有小写字母:lower函数 (2).转换为所有大写字母:upper函数 (3).转换为首字母大写,其余小写字母:proper函数 三种函数的使用方式. ...

  10. 【C语言】统计数组中出现次数超过一半的数字

    //统计数组中出现次数超过一半的数字 #include <stdio.h> int Find(int *arr, int len) { int num = 0; //当前数字 int ti ...