帆布如何实现动态小球重叠效果 - 行业资讯 - 肥雀云

　　介绍

这篇文章将为大家详细讲解有关帆布如何实现动态小球重叠效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

<强>静态小球

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

& lt; button id=癰tn"在按钮& lt;/button> 　　& lt; canvas id=癱anvas",宽度=?00“,身高=?00“,在当前浏览器不支持画布,请更换浏览器后再试& lt;/canvas> 　　& lt; script> 　　var canvas =, . getelementbyid(& # 39;帆布# 39;); 　　var H=300 W=500; 　　时间=btn.onclick 函数(){ 　　,getBalls (); 　　} 　　getBalls (); 　　function getBalls () {=,canvas.height H; 　　,如果(canvas.getContext) { 　　,var cxt =, canvas.getContext (& # 39; 2 d # 39;); 　　,(var 小姐:=,0;,小姐:& lt;, 50;,我+ +){ 　　,var tempR =, Math.floor (math . random () * 255); 　　,var tempG =, Math.floor (math . random () * 255); 　　,var tempB =, Math.floor (math . random () * 255);=,cxt.fillStyle & # 39; rgb (& # 39;, +, tempR +, & # 39;, & # 39;, +, tempG +, & # 39;, & # 39;, +, tempB +, & # 39;) & # 39;; 　　,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 (); 　　,} 　　}大敌; 　　} 　　& lt;/script>

<强>随机运动

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

& lt; button id=癰tn"在更新& lt;/button> 　　& lt; canvas id=癱anvas",宽度=?00“,身高=?00“,在当前浏览器不支持画布,请更换浏览器后再试& lt;/canvas> 　　& lt; script> 　　btn.onclick =, function () {history.go ();} 　　var canvas =, . getelementbyid(& # 39;帆布# 39;);//存储画布宽高　　var H=300 W=500;//存储小球个数　　var NUM =, 50;//存储小球　　var balls =, []; 　　function getBalls () { 　　,如果(canvas.getContext) { 　　,var cxt =, canvas.getContext (& # 39; 2 d # 39;); 　　,(var 小姐:=,0;,小姐:& lt;, NUM;,我+ +){ 　　,var tempR =, Math.floor (math . random () * 255); 　　,var tempG =, Math.floor (math . random () * 255); 　　,var tempB =, Math.floor (math . random () * 255); 　　,var tempColor =, & # 39; rgb (& # 39;, +, tempR +, & # 39;, & # 39;, +, tempG +, & # 39;, & # 39;, +, tempB +, & # 39;) & # 39;; 　　,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), 　　,颜色:tempColor, 　　,disX: Math.floor (math . random (), *, 3, 1), 　　,disY: Math.floor (math . random (), *, 3, 1) 　　,}; 　　,balls.push (tempBall); 　　,} 　　}大敌; 　　} 　　function updateBalls () { 　　,(var 小姐:=,0;,小姐:& lt;, balls.length;,我+ +){ 　　,球[我].stepY +=,球[我].disY; 　　,球[我].stepX +=,球[我].disX; 　　,球[我].x +=,球[我].stepX; 　　,球[我].y +=,[我].stepY;球, 　　,} 　　} 　　function renderBalls () { 　　,//重置画布高度,达到清空画布的效果=,canvas.height H,, 　　,如果(canvas.getContext) { 　　,var cxt =, canvas.getContext (& # 39; 2 d # 39;); 　　,(var 小姐:=,0;,小姐:& lt;, balls.length;,我+ +){ 　　,cxt.beginPath (); 　　[我]。x, cxt.arc(球,球[我].y,球[我]r, 0, 2 * Math.PI);=,cxt.fillStyle 球[我].color; 　　,cxt.closePath (); 　　,cxt.fill (),, 　　}大敌; 　　,} 　　} 　　getBalls (); 　　clearInterval (oTimer); 　　var oTimer =, setInterval(函数(){ 　　,//更新小球运动状态　　,updateBalls (); 　　,//渲染小球　　,renderBalls (); 　　},50); 　　& lt;/script>

<强>碰壁检测

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