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 相关文章推荐
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
May 29 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
javascript实现前端分页效果
Jun 24 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 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 session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
jQuery学习笔记之jQuery的动画
2010/12/22 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
vuex实现购物车功能
2020/06/28 Javascript
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
python抽取指定url页面的title方法
2018/05/11 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
django session完成状态保持的方法
2018/11/27 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
文科生自我鉴定
2014/02/15 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
新闻报道稿范文
2015/07/23 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
如何写好竞聘报告
2019/04/03 职场文书