canvas实现动态小球重叠效果


Posted in Javascript onFebruary 06, 2017

前面的话

在javascript运动系列中,详细介绍了各种运动,其中就包括碰壁运动。但是,如果用canvas去实现,却是另一种思路。本文将详细介绍canvas动态小球重叠效果

静态小球

首先,生成随机半径、随机位置的50个静态小球

<button id="btn">按钮</button>
<canvas id="canvas" width="500" height="300" style="border:1px solid black">当前浏览器不支持canvas,请更换浏览器后再试</canvas>
<script>
var canvas = document.getElementById('canvas');
var H=300,W=500;
btn.onclick = function(){
 getBalls();
}
getBalls();
function getBalls(){
 canvas.height = H;
 if(canvas.getContext){
 var cxt = canvas.getContext('2d');
 for(var i = 0; i < 50; i++){
 var tempR = Math.floor(Math.random()*255);
 var tempG = Math.floor(Math.random()*255);
 var tempB = Math.floor(Math.random()*255);
 cxt.fillStyle = 'rgb(' + tempR + ',' + tempG + ',' + tempB + ')';
 var tempW = Math.floor(Math.random()*W);
 var tempH = Math.floor(Math.random()*H);
 var tempR = Math.floor(Math.random()*50);
 cxt.beginPath();
 cxt.arc(tempW,tempH,tempR,0,Math.PI*2);
 cxt.fill();
 }
 } 
}
</script>

随机运动

接着,这50个小球做随机运动,需要配合定时器更新小球的运动状态。这时,需要对上面代码进行改写

<button id="btn">更新</button>
<canvas id="canvas" width="500" height="300" style="border:1px solid black">当前浏览器不支持canvas,请更换浏览器后再试</canvas>
<script>
btn.onclick = function(){history.go();}
var canvas = document.getElementById('canvas');
//存储画布宽高
var H=300,W=500;
//存储小球个数
var NUM = 50;
//存储小球
var balls = [];
function getBalls(){
 if(canvas.getContext){
 var cxt = canvas.getContext('2d');
 for(var i = 0; i < NUM; i++){
 var tempR = Math.floor(Math.random()*255);
 var tempG = Math.floor(Math.random()*255);
 var tempB = Math.floor(Math.random()*255);
 var tempColor = 'rgb(' + tempR + ',' + tempG + ',' + tempB + ')';
 var tempX = Math.floor(Math.random()*W);
 var tempY = Math.floor(Math.random()*H);
 var tempR = Math.floor(Math.random()*30+20);
 var tempBall = {
 x:tempX,
 y:tempY,
 r:tempR,
 stepX:Math.floor(Math.random() * 4 -2),
 stepY:Math.floor(Math.random() * 4 -2),
 color:tempColor,
 disX:Math.floor(Math.random() * 3 -1),
 disY:Math.floor(Math.random() * 3 -1)
 };
 balls.push(tempBall);
 }
 } 
}
function updateBalls(){
 for(var i = 0; i < balls.length; i++){
 balls[i].stepY += balls[i].disY;
 balls[i].stepX += balls[i].disX;
 balls[i].x += balls[i].stepX;
 balls[i].y += balls[i].stepY; 
 }
}
function renderBalls(){
 //重置画布高度,达到清空画布的效果
 canvas.height = H; 
 if(canvas.getContext){
 var cxt = canvas.getContext('2d');
 for(var i = 0; i < balls.length; i++){
 cxt.beginPath();
 cxt.arc(balls[i].x,balls[i].y,balls[i].r,0,2*Math.PI);
 cxt.fillStyle = balls[i].color;
 cxt.closePath();
 cxt.fill(); 
 } 
 }
}
getBalls();
clearInterval(oTimer);
var oTimer = setInterval(function(){
 //更新小球运动状态
 updateBalls();
 //渲染小球
 renderBalls();
},50);
</script>

碰壁检测

下面,增加小球的碰壁检测功能,当小球碰壁时,变为相反方向

function bumpTest(ele){
 //左侧
 if(ele.x <= ele.r){
 ele.x = ele.r;
 ele.stepX = -ele.stepX;
 }
 //右侧
 if(ele.x >= W - ele.r){
 ele.x = W - ele.r;
 ele.stepX = -ele.stepX;
 }
 //上侧
 if(ele.y <= ele.r){
 ele.y = ele.r;
 ele.stepY = -ele.stepY;
 }
 //下侧
 if(ele.y >= H - ele.r){
 ele.y = H - ele.r;
 ele.stepY = -ele.stepY;
 }
}
<button id="btn">更新</button>
<canvas id="canvas" width="500" height="300" style="border:1px solid black">当前浏览器不支持canvas,请更换浏览器后再试</canvas>
<script>
btn.onclick = function(){history.go();}
var canvas = document.getElementById('canvas');
//存储画布宽高
var H=300,W=500;
//存储小球个数
var NUM = 30;
//存储小球
var balls = [];
function getBalls(){
 if(canvas.getContext){
 var cxt = canvas.getContext('2d');
 for(var i = 0; i < NUM; i++){
 var tempR = Math.floor(Math.random()*255);
 var tempG = Math.floor(Math.random()*255);
 var tempB = Math.floor(Math.random()*255);
 var tempColor = 'rgb(' + tempR + ',' + tempG + ',' + tempB + ')';
 var tempR = Math.floor(Math.random()*30+20);
 var tempX = Math.floor(Math.random()*(W-tempR) + tempR);
 var tempY = Math.floor(Math.random()*(H-tempR) + tempR);
 
 var tempBall = {
 x:tempX,
 y:tempY,
 r:tempR,
 stepX:Math.floor(Math.random() * 13 -6),
 stepY:Math.floor(Math.random() * 13 -6),
 color:tempColor
 };
 balls.push(tempBall);
 }
 } 
}
function updateBalls(){
 for(var i = 0; i < balls.length; i++){
 balls[i].x += balls[i].stepX;
 balls[i].y += balls[i].stepY; 
 bumpTest(balls[i]);
 }
}
function bumpTest(ele){
 //左侧
 if(ele.x <= ele.r){
 ele.x = ele.r;
 ele.stepX = -ele.stepX;
 }
 //右侧
 if(ele.x >= W - ele.r){
 ele.x = W - ele.r;
 ele.stepX = -ele.stepX;
 }
 //上侧
 if(ele.y <= ele.r){
 ele.y = ele.r;
 ele.stepY = -ele.stepY;
 }
 //下侧
 if(ele.y >= H - ele.r){
 ele.y = H - ele.r;
 ele.stepY = -ele.stepY;
 }
}
function renderBalls(){
 //重置画布高度,达到清空画布的效果
 canvas.height = H; 
 if(canvas.getContext){
 var cxt = canvas.getContext('2d');
 for(var i = 0; i < balls.length; i++){
 cxt.beginPath();
 cxt.arc(balls[i].x,balls[i].y,balls[i].r,0,2*Math.PI);
 cxt.fillStyle = balls[i].color;
 cxt.closePath();
 cxt.fill(); 
 } 
 }
}
getBalls();
clearInterval(oTimer);
var oTimer = setInterval(function(){
 //更新小球运动状态
 updateBalls();
 //渲染小球
 renderBalls();
},50);
</script>

重叠效果

canvas的合成属性globalCompositeOperation表示后绘制的图形怎样与先绘制的图形结合,属性值是字符串,可能值如下:
source-over(默认):后绘制的图形位于先绘制的图形上方
source-in:后绘制的图形与先绘制的图形重叠的部分可见,两者其他部分完全透明
source-out:后绘制的图形与先绘制的图形不重叠的部分可见,先绘制的图形完全透明
source-atop:后绘制的图形与先绘制的图形重叠的部分可见,先绘制的图形不受影响
destination-over:后绘制的图形位于先绘制的图形下方,只有之前透明像素下的部分才可见
destination-in:后绘制的图形位于先绘制的图形下方,两者不重叠的部分完全透明
destination-out:后绘制的图形擦除与先绘制的图形重叠的部分
destination-atop:后绘制的图形位于先绘制的图形下方,在两者不重叠的地方,先绘制的图形会变透明
lighter:后绘制的图形与先绘制的图形重叠部分的值相加,使该部分变亮
copy:后绘制的图形完全替代与之重叠的先绘制图形
xor:后绘制的图形与先绘制的图形重叠的部分执行"异或"操作

增加小球的重叠效果为'xor',即为最终的效果展示

<button id="btn">变换</button>
<canvas id="canvas" width="500" height="300" style="border:1px solid black">当前浏览器不支持canvas,请更换浏览器后再试</canvas>
<script>
btn.onclick = function(){history.go();}
var canvas = document.getElementById('canvas');
//存储画布宽高
var H=300,W=500;
//存储小球个数
var NUM = 30;
//存储小球
var balls = [];
function getBalls(){
 if(canvas.getContext){
 var cxt = canvas.getContext('2d');
 for(var i = 0; i < NUM; i++){
 var tempR = Math.floor(Math.random()*255);
 var tempG = Math.floor(Math.random()*255);
 var tempB = Math.floor(Math.random()*255);
 var tempColor = 'rgb(' + tempR + ',' + tempG + ',' + tempB + ')';
 var tempR = Math.floor(Math.random()*30+20);
 var tempX = Math.floor(Math.random()*(W-tempR) + tempR);
 var tempY = Math.floor(Math.random()*(H-tempR) + tempR);
 
 var tempBall = {
 x:tempX,
 y:tempY,
 r:tempR,
 stepX:Math.floor(Math.random() * 21 -10),
 stepY:Math.floor(Math.random() * 21 -10),
 color:tempColor
 };
 balls.push(tempBall);
 }
 } 
}
function updateBalls(){
 for(var i = 0; i < balls.length; i++){
 balls[i].x += balls[i].stepX;
 balls[i].y += balls[i].stepY; 
 bumpTest(balls[i]);
 }
}
function bumpTest(ele){
 //左侧
 if(ele.x <= ele.r){
 ele.x = ele.r;
 ele.stepX = -ele.stepX;
 }
 //右侧
 if(ele.x >= W - ele.r){
 ele.x = W - ele.r;
 ele.stepX = -ele.stepX;
 }
 //上侧
 if(ele.y <= ele.r){
 ele.y = ele.r;
 ele.stepY = -ele.stepY;
 }
 //下侧
 if(ele.y >= H - ele.r){
 ele.y = H - ele.r;
 ele.stepY = -ele.stepY;
 }
}
function renderBalls(){
 //重置画布高度,达到清空画布的效果
 canvas.height = H; 
 if(canvas.getContext){
 var cxt = canvas.getContext('2d');
 for(var i = 0; i < balls.length; i++){
 cxt.beginPath();
 cxt.arc(balls[i].x,balls[i].y,balls[i].r,0,2*Math.PI);
 cxt.fillStyle = balls[i].color;
 cxt.globalCompositeOperation = 'xor';
 cxt.closePath();
 cxt.fill(); 
 } 
 }
}
getBalls();
clearInterval(oTimer);
var oTimer = setInterval(function(){
 //更新小球运动状态
 updateBalls();
 //渲染小球
 renderBalls();
},50);
</script>

源码查看

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
科讯商业版中用到的ajax空间与分页函数
Sep 02 Javascript
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
jquery插件开发注意事项小结
Jun 04 Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
js 将json字符串转换为json对象的方法解析
Nov 13 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
bootstrap select下拉搜索插件使用方法详解
Nov 23 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
vue脚手架中配置Sass的方法
Jan 04 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
canvas滤镜效果实现代码
Feb 06 #Javascript
canvas实现图像放大镜
Feb 06 #Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 #Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 #Javascript
jQuery快速实现商品数量加减的方法
Feb 06 #Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 #Javascript
jQuery内容筛选选择器实例代码
Feb 06 #Javascript
You might like
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
php使用google地图应用实例
2014/12/31 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
javascript 数组排序函数
2009/08/20 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
Jquery 例外被抛出且未被接住原因介绍
2013/09/04 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
使用python Django做网页
2013/11/04 Python
Python中关于字符串对象的一些基础知识
2015/04/08 Python
使用Turtle画正螺旋线的方法
2017/09/22 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
学生发电厂实习自我鉴定
2013/09/22 职场文书
保密承诺书范文
2014/03/27 职场文书
七年级地理教学计划
2015/01/22 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
利用python调用摄像头的实例分析
2021/06/07 Python
什么是Python装饰器?如何定义和使用?
2022/04/11 Python