[js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果
备注：本文后面的代码，如果加载了ball.js，那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码.
本文，我们要做点有意思的效果，首先，来一个简单的边界判断，所谓边界判断：就是把物体的运动限定在一个范围内.我们先来一个简单的实例，在canvas上生成一个小球，小球的初始位置是在canvas的正中间，然后通过键盘的上下左右来移动小球的位置，如果小球碰到canvas的左边，那么不能再向左运动，其他方向同理.
要实现这个效果，只需要一个边界判断，即可。
function checkBorder() {
if ( ball.x < ball.radius ) { //碰到左边界
ball.x = ball.radius;
} else if ( ball.y < ball.radius ) { //碰到上边界
ball.y = ball.radius;
} else if ( ball.x > width - ball.radius ) { //碰到右边界
ball.x = width - ball.radius;
}else if ( ball.y > height - ball.radius ){
ball.y = height - ball.radius;
}
}
左边界：只要判断小球的圆心x 如果小于小球的半径，那肯定是碰到了左边界，我们就让小球的中心x等于小球的半径。
右边界：只要判断小球的圆心x 如果大于canvas的宽度减去小球的半径，那肯定是碰到了右边界，我们就让小球的中心x等于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);
ball.fill( oGc );
addEventListener("keydown", function (ev) {
oGc.clearRect(0, 0, width, height);
var oEvent = ev || event;
switch (oEvent.keyCode) {
case 37:
ball.x -= 5;
checkBorder();
ball.fill(oGc);
break;
case 39:
ball.x += 5;
checkBorder();
ball.fill(oGc);
break;
case 38:
ball.y -= 5;
checkBorder();
ball.fill(oGc);
break;
case 40:
ball.y += 5;
checkBorder();
ball.fill(oGc);
break;
}
}, false);
function checkBorder() {
if ( ball.x < ball.radius ) { //碰到左边界
ball.x = ball.radius;
} else if ( ball.y < ball.radius ) { //碰到上边界
ball.y = ball.radius;
} else if ( ball.x > width - ball.radius ) { //碰到右边界
ball.x = width - ball.radius;
}else if ( ball.y > height - ball.radius ){
ball.y = height - ball.radius;
}
}
}
</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 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);
ball.fill(oGc);
addEventListener("keydown", function (ev) {
oGc.clearRect(0, 0, width, height);
var oEvent = ev || event;
switch (oEvent.keyCode) {
case 37:
ball.x -= 5;
checkBorder();
ball.fill(oGc);
break;
case 39:
ball.x += 5;
checkBorder();
ball.fill(oGc);
break;
case 38:
ball.y -= 5;
checkBorder();
ball.fill(oGc);
break;
case 40:
ball.y += 5;
checkBorder();
ball.fill(oGc);
break;
}
}, false);
function checkBorder() {
if (ball.x < -ball.radius) { //完全超出左边界
ball.x = width + ball.radius; //让球从右边出来
} else if (ball.y < -ball.radius) { //完全超出上边界
ball.y = height + ball.radius;//让球从下面出来
} else if (ball.x > width + ball.radius) { //完全超出右边界
ball.x = -ball.radius;//让球从左边出来
} else if (ball.y > height + ball.radius) {//完全超出下边界
ball.y = -ball.radius; //让球从上边出来
}
}
}
</script>
</head> <body>
<canvas id="canvas" width="1200" height="600"></canvas>
</body>
散弹效果：
通过canvas的中心点，不停的向四周发射小球，形成散弹的效果.
我不知道你们有没有这样的误区：不停的向四周发射小球，那是不是要不停的创造小球呢？如果你这样想，程序就算写出来了，肯定会卡死.
其实我们可以只创建，一定数量的小球，比如( 50, 60. ...100 )，然后当这些小球，完全超出的边界的时候，再把这些小球的圆心( x, y )设定到最开始的位置，再次随机x和y方向的速度，就可以达到目的了， 说白了就是，那个完全超出边界的小球，我们让他重新回到最初的地方，只是改变了他的颜色和速度，给人感觉就是那个发射小球的地方源源不断的在发射小球
完整的散弹效果：
<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 ){
if ( ball.x < -ball.radius
|| ball.x > width + ball.radius
|| ball.y < -ball.radius
|| ball.y > height + ball.radius ) {
ball.x = width / 2;
ball.y = height / 2;
ball.vx = ( Math.random() * 2 - 1 ) * 5;
ball.vy = ( Math.random() * 2 - 1 ) * 5;
}
ball.x += ball.vx;
ball.y += ball.vy;
ball.fill( oGc );
} );
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 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, gravity = 0.2;
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) * 10;
balls.push(ball);
}
(function move() {
oGc.clearRect(0, 0, width, height);
balls.forEach(function (ball) {
if (ball.x < -ball.radius
|| ball.x > width + ball.radius
|| ball.y < -ball.radius
|| ball.y > height + ball.radius) {
ball.x = width / 2;
ball.y = height / 2;
ball.vx = (Math.random() * 2 - 1) * 5;
ball.vy = (Math.random() * 2 - 1) * 10;
}
ball.x += ball.vx;
ball.y += ball.vy;
ball.vy += gravity;
ball.fill(oGc);
});
requestAnimationFrame(move);
})();
}
</script>
</head> <body>
<canvas id="canvas" width="1200" height="600"></canvas>
</body>
还可以通过控制小球的vx, vy，就是x方向和y方向的速度，来限制小球朝某一个方向发射，下面的例子，我们只让小球朝着x轴的右边发射
<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.abs( ( 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 ){
if ( ball.x < -ball.radius
|| ball.x > width + ball.radius
|| ball.y < -ball.radius
|| ball.y > height + ball.radius ) {
ball.x = width / 2;
ball.y = height / 2;
ball.vx = Math.abs( ( Math.random() * 2 - 1 ) * 5 );
ball.vy = ( Math.random() * 2 - 1 ) * 5;
}
ball.x += ball.vx;
ball.y += ball.vy;
ball.fill( oGc );
} );
requestAnimationFrame( move );
})();
}
</script>
</head>
<body>
<canvas id="canvas" width="1200" height="600"></canvas>
</body>
[js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果的更多相关文章
- [js高手之路]html5 canvas动画教程 - 边界判断与反弹
备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 边界反弹: 当小球碰到canvas的四个方向的 ...
- [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标
有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...
- [js高手之路]html5 canvas动画教程 - 下雪效果
利用canvas,实现一个下雪的效果,我们先预览下效果: 我们先分析下这个效果: 1,随机产生雪花 2,雪花的产生不是同时产生,而是有先后顺序的 3,雪花怎么表示 4,怎么源源不断的下雪 5,雪花有大 ...
- [js高手之路]html5 canvas动画教程 - 跟着鼠标移动消失的一堆炫彩小球
综合利用前面所学,实现一个绚丽的小球动画,这个实例用到的知识点,在我的博客全部都有,可以去这里查看所有的canvas教程 <head> <meta charset='utf-8' / ...
- [js高手之路] html5 canvas动画教程 - 匀速运动
匀速运动:指的是物体在一条直线上运动,并且物体在任何相等时间间隔内通过的位移都是相等的.其实就是匀速直线运动,它的特点是加速度为0,从定义可知,在任何相等的时间间隔内,速度大小和方向是相同的. < ...
- [js高手之路]html5 canvas动画教程 - 自己动手做一个类似windows的画图软件
这个绘图工具,我还没有做完,不过已经实现了总架构,以及常见的简易图形绘制功能: 1,可以绘制直线,圆,矩形,正多边形[已完成] 2,填充颜色和描边颜色的选择[已完成] 3,描边和填充功能的选择[已完成 ...
- [js高手之路]html5 canvas动画教程 - 重力、摩擦力、加速、抛物线运动
上节,我们讲了匀速运动,本节分享的运动就更有意思了: 加速运动 重力加速度 抛物线运动 摩擦力 加速运动: <head> <meta charset='utf-8' /> &l ...
- [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)
本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...
- [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...
随机推荐
- 2017最新的Python教程分享
Python在数据科学盛行的今天,其易于阅读和编写的特点,越来越受编程者追捧.在IEEE发布的2017年编程语言排行榜中,Python也高居首位.如果你有学Python的计划,快来看看小编分享的Pyt ...
- Java基础学习——泛型
一.泛型方法 /** 自定义泛型:自定义泛型可以理解为是一个数据类型的占位符,或者理解为是一个数据类型的变量. 泛型方法: 泛型方法的自定义格式:修饰符<声明自定义泛型>返回值类型 函数名 ...
- poj 2553 强连通
题意:给出一个有向图,定义:若节点v所有能到达的点{wi},都能反过来到达v,那么称节点v是sink.题目要求所有的sink点. 思路:强连通缩点找出出度为零的点,输出即可. 这题主要问题是读题,了解 ...
- Httprequest 获取url 常用方法
HttpServletRequest常用获取URL的方法 1.request.getRequestURL() 返回的是完整的url,包括Http协议,端口号,servlet名字和映射路 ...
- PS小实验-去除水印
PS小实验-去除水印 水印是一些品牌商覆盖在图片或视频上的一个商标logo或小文本,比如大家最讨厌的百度logo,作者本人也是比较讨厌水印的,让好端端的一张图片变得美中不足. 个人觉得用photosh ...
- 201521123049 《JAVA程序设计》 第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...
- PTA中提交Java程序的一些套路
201708新版改版说明 PTA与2017年8月已升级成新版,域名改为https://pintia.cn/,官方建议使用Firefox与Chrome浏览器. 旧版 PTA 用户首次在新版系统登录时,请 ...
- 201521123064 《Java程序设计》第12周学习总结
本次作业参考文件 正则表达式参考资料 1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. ① 标准输入输出流(字节流):标准输入流 System.in,标准输出流 ...
- 201521123080《Java程序设计》第11周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 多线程: 操作系统有两个容易混淆的概念,进程和线程. 进程:一个计算机程序的运行实例,包含了需要执行的指令:有自己 ...
- Java内部类的总结
内部类是指在一个外部类的内部再定义一个类.类名不需要和文件夹相同. 内部类分为: 成员内部类.局部内部类.静态嵌套类.匿名内部类 . 1.成员内部类 成员内部类是最普通的内部类,它的定义为位于另一个类 ...