备注：本文后面的代码，如果加载了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. Emoji表情符号录入MySQL数据库报错的解决方式

    前言:手机app应用评论的时候,恢复表情符号.提示失败.​1,查看tomcat后台日志,核心报错信息例如以下:  Caused by: java.sql.SQLException: Incorrect ...

  2. 树莓派学习笔记——USB wifi配置指南

    0 前言     树莓派既能够使用有线网络又能够无线网络,假设使用有线网络不方便的话能够借助USB wifi无线网卡让树莓派也插上无线"翅膀". 可是和使用有线网络即插即用的方式不 ...

  3. Android TCP/IP 扫盲教程

    TCP/IP 是因特网的通信协议. 通信协议是对计算机必须遵守的规则的描写叙述.仅仅有遵守这些规则.计算机之间才干进行通信. 浏览器和server都在使用 TCP/IP 因特网浏览器和因特网serve ...

  4. 王磊：AI 时代物流行业的 OCR 应用

    欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ OCR 是人工智能里面非常重要的基础能力之一.腾讯云人工智能产品总监王磊,结合物流场景解读了OCR技术."OCR文本识别能够优化 ...

  5. 【ASP.NET MVC】MVC概述

    描述 本篇文章主要概述ASP.NET MVC,具体包括如下内容: 1.MVC模式概述 2.WebForm概述 3.WebForm与MVC区别 4.ASP.NET MVC发展历程 5.运用程序结构 6. ...

  6. 【SqlServer系列】表达式(expression)

    1   概述 本篇这文章主要概述SqlServer表达式. 2   具体内容 2.1  使用范围 SQL Server(2008开始) :Azure SQL数据库:Azure  SQL数据仓库:并行数 ...

  7. 【Jquery】之DOM操作

    Questions 本篇文章主要讲解Jquery中对DOM的操作,主要内容如下: 1    内容区 1.1  .addClass() (1).addClass(className) <!DOCT ...

  8. NIO相关基础篇三

    转载请注明原创出处,谢谢! 说在前面 上篇NIO相关基础篇二,主要介绍了文件锁.以及比较关键的Selector,本篇继续NIO相关话题内容,主要谈谈一些Linux 网络 I/O模型.零拷贝等一些内容, ...

  9. python decorator 基础

    一般来说,装饰器是一个函数,接受一个函数(或者类)作为参数,返回值也是也是一个函数(或者类).首先来看一个简单的例子: # -*- coding: utf-8 -*- def log_cost_tim ...

  10. myeclipse 2014 Customize Perspective 失效

    1.将9个jar复制到myeclipse安装目录\plugins中 2.删除和这9个jar同包名但是版本号较低的9个文件 3.重启myeclipse 2014 注:这9个 jar 包 自己到网上搜索, ...