[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这个点 ...
随机推荐
- pythonl练习
练习:用户输入姓名.年龄.工作.爱好 ,然后打印成以下格式 ------------ info of Egon ----------- Name : Egon Age : 22 Sex : male ...
- [js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)
上文我们讲到了options的配置和获取数据的方式,本文,我们继续深入options的配置 一.html-webpack-plugin插件中的options除了自己定义了一些基本配置外,我们是可以任意 ...
- 三分钟读懂TT猫分布式、微服务和集群之路
针对入门新手的普及,有过大型网站技术架构牛人路过,别耽误浪费了时间,阅读之前,请确保有一定的网络基础,熟练使用Linux,浏览大概需要3-5分钟的时间,结尾有彩蛋. 目录 分布式 微服务 负载均衡集群 ...
- ssh keys管理工具
原文地址:https://rtyan.github.io/%E5%B7%A5%E5%85%B7/2017/09/12/ssh-keys-manager.html 引言 我有两个github账户,一个是 ...
- RMA退货流程解决方案
RMA退货流程解决方案 1.概述 在高科技制造业中有效地对产品退货进行控制和跟踪有很大的意义.对于一个产品成本从几元到几十万元的工业,管理退货流程的能力至关重要,缺乏跟踪和控制有可能导致上百万元的损失 ...
- 转深入Java虚拟机 之四：类加载机制
转载请注明出处:http://blog.csdn.net/ns_code/article/details/17881581 类加载过程 类从被加载到虚拟机内存中开始,到卸载出内存为止,它的整个 ...
- 结对编程1-四则运算（基于GUI）
林晓芳201421123092.陈惠201421123096 coding 地址:https://git.coding.net/lianlian/92.96.1.git 一.题目描述 我们在个人作业1 ...
- 团队作业4——第一次项目冲刺（Alpha版本）2017.4.23
1.当天站立式会议照片 本次会议为第一次会议 本次会议在5号公寓1楼召开,本次会议内容: ①:做第一天的简单分工 ②:讨论每个人是否对安排的任务有苦难 ③:规定完成时间是在第二天之前 ④:遇到困难,及 ...
- 个人作业2————英语学习APP的案例分析
必应词典案例分析 第一部分 调研, 评测 1.下载并使用 第一次使用必应词典,安装完打开便是这样的界面,第一印象还行,界面平平无奇,比较简洁,上面分四个模块,这样一眼看去感觉功能比较单一 使用了下例句 ...
- Swing-GridBagLayout用法-入门
注:本文内容转自:Java Layout总结-GridBagLayout.内容根据笔者理解稍有整理. GridBagLayout布局管理器:这就是最复杂的一个布局管理器了,网格包布局.在此布局中,组件 ...