js实现随机移动的萤火虫

知识点：3次贝塞尔曲线

请在这里查看示例 ☞ firefly示例

html:

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>  <script type="text/javascript" src="js/fly.js"></script>  <title>demo</title>  <style>  * {  margin: 0;   padding: 0;  }  body, html {  width: 100%;  height: 100%;  }  .cav {  position: absolute;  top: 0;  left: 0;  }   </style>
</head>
<body>  <canvas class="cav"></canvas>
<script>  </script>
</body>
</html>

fly.js:

;$(function() {  var $cav = $('.cav');    var $cavParent = $cav.parent();    var cav = $cav[0].getContext('2d'),    backColor = '#f7fafc',//背景颜色    frontColor = 'rgba(200, 200, 200, .8)',//点颜色    overPoint = -10000,    mouseArr = [overPoint, overPoint, 200];//鼠标位置和极限半径    $('body').css('background', backColor);var cavW = $cavParent.width(),    cavH = $cavParent.height(),    dotArr = [],    bezierArr = [],    num = 20,// 点的个数  ran = 500;    step = 500;    $cav.attr({    'width': cavW,    'height': cavH,    }).css({    'background': backColor,    });    $cav.on('mousemove', function(e) {    mouseArr[0] = e.offsetX;    mouseArr[1] = e.offsetY;    });   $cav.on('mouseout', function(e) {    mouseArr[0] = overPoint;    mouseArr[1] = overPoint;    });    //生成随机点    for(var i=0; i<num; i++) {    var cavL1 = Math.random()*cavW,    cavT1 = Math.random()*cavH,    cavL2 = Math.random()*cavW,    cavT2 = Math.random()*cavH,    cavL3 = Math.random()*cavW,    cavT3 = Math.random()*cavH,    cavL4 = Math.random()*cavW,    cavT4 = Math.random()*cavH,    cavO = Math.random(),//透明度    cavR = cavO*8+2,//尺寸    cavD = parseInt(Math.random()*ran)+step;//点的个数    cavT = 0;//自身计数器    dotArr[i] = [[cavL1, cavT1]/*0*/, [cavL2, cavT2]/*1*/, [cavL3, cavT3]/*2*/, [cavL4, cavT4]/*3*/, cavO/*4*/, cavR/*5*/, cavD/*6*/, cavT/*7*/];//存储坐标    var cp = [new Point2D(dotArr[i][0][0], dotArr[i][0][1]), new Point2D(dotArr[i][1][0], dotArr[i][1][1]), new Point2D(dotArr[i][2][0], dotArr[i][2][1]), new Point2D(dotArr[i][3][0], dotArr[i][3][1])];      var numberOfPoints=dotArr[i][6];      var curve=[];      ComputeBezier(cp, numberOfPoints, curve);    bezierArr[i] = curve;    }    setInterval(function() {    cav.clearRect(0, 0, cavW, cavH);    //移动    for(var i=0; i<num; i++) {    if(dotArr[i][7] >= dotArr[i][6]) {//走到最后一个点    var cavL1 = Math.random()*cavW,    cavT1 = Math.random()*cavH,    cavL2 = Math.random()*cavW,    cavT2 = Math.random()*cavH,    cavL3 = Math.random()*cavW,    cavT3 = Math.random()*cavH,    cavL4 = Math.random()*cavW,    cavT4 = Math.random()*cavH,    cavO = Math.random(),//透明度    cavR = cavO*8+2,//尺寸    cavD = parseInt(Math.random()*ran)+step;//点的个数    cavT = 0;//自身计数器    dotArr[i] = [[bezierArr[i][dotArr[i][6]-1].x, bezierArr[i][dotArr[i][6]-1].y]/*0*/, [cavL2, cavT2]/*1*/, [cavL3, cavT3]/*2*/, [cavL4, cavT4]/*3*/, dotArr[i][4]/*4*/, dotArr[i][5]/*5*/, cavD/*6*/, cavT/*7*/];//存储坐标    var cp = [new Point2D(dotArr[i][0][0], dotArr[i][0][1]), new Point2D(dotArr[i][1][0], dotArr[i][1][1]), new Point2D(dotArr[i][2][0], dotArr[i][2][1]), new Point2D(dotArr[i][3][0], dotArr[i][3][1])];      var numberOfPoints=dotArr[i][6];      var curve=[];      ComputeBezier(cp, numberOfPoints, curve);    bezierArr[i] = curve;    }else {    // 和鼠标交互  if(Math.pow(bezierArr[i][dotArr[i][7]].x-mouseArr[0], 2)+Math.pow(bezierArr[i][dotArr[i][7]].y-mouseArr[1], 2) <= Math.pow(mouseArr[2], 2)) {  cav.beginPath();    var globalAlpha = 1-Math.sqrt(Math.pow(bezierArr[i][dotArr[i][7]].x-mouseArr[0], 2)+Math.pow(bezierArr[i][dotArr[i][7]].y-mouseArr[1], 2))/100/2;  globalAlpha = globalAlpha<0?0:globalAlpha;  cav.globalAlpha = globalAlpha;  cav.strokeStyle = frontColor;    cav.lineTo(mouseArr[0],mouseArr[1]);    cav.lineTo(bezierArr[i][dotArr[i][7]].x, bezierArr[i][dotArr[i][7]].y);    cav.stroke();    }  // 点与点交互  for(var j=0; j<num; j++) {    if(i!=j && dotArr[j][7] < dotArr[j][6]) {//走到最后一个点且不是同一个点    if(Math.pow(bezierArr[i][dotArr[i][7]].x-bezierArr[j][dotArr[j][7]].x, 2)+Math.pow(bezierArr[i][dotArr[i][7]].y-bezierArr[j][dotArr[j][7]].y, 2) <= Math.pow(mouseArr[2], 2)) {    cav.beginPath();    var globalAlpha = 1-Math.sqrt(Math.pow(bezierArr[i][dotArr[i][7]].x-bezierArr[j][dotArr[j][7]].x, 2)+Math.pow(bezierArr[i][dotArr[i][7]].y-bezierArr[j][dotArr[j][7]].y, 2))/100/2;  globalAlpha = globalAlpha<0?0:globalAlpha;  cav.globalAlpha = globalAlpha;    cav.strokeStyle = frontColor;    cav.lineTo(bezierArr[j][dotArr[j][7]].x,bezierArr[j][dotArr[j][7]].y);    cav.lineTo(bezierArr[i][dotArr[i][7]].x, bezierArr[i][dotArr[i][7]].y);    cav.stroke();    }  }  }  cav.beginPath();    cav.globalAlpha = dotArr[i][4]*.6;    cav.fillStyle = frontColor;    cav.arc(bezierArr[i][dotArr[i][7]].x, bezierArr[i][dotArr[i][7]].y, dotArr[i][5], 0, 2*Math.PI);    cav.fill();    }    dotArr[i][7] += 1;    }    }, 20);    function Point2D(x, y){      this.x=x||0.0;      this.y=y||0.0;      }    function PointOnCubicBezier(cp, t) {//cp为4个Point2D点，0<=t<=1    var ax, bx, cx;      var ay, by, cy;      var tSquared, tCubed;      var result = new Point2D;      //计算多项式系数     cx = 3.0 * (cp[1].x - cp[0].x);      bx = 3.0 * (cp[2].x - cp[1].x) - cx;      ax = cp[3].x - cp[0].x - cx - bx;      cy = 3.0 * (cp[1].y - cp[0].y);      by = 3.0 * (cp[2].y - cp[1].y) - cy;      ay = cp[3].y - cp[0].y - cy - by;      //计算位于参数值t的曲线点    tSquared = t * t;      tCubed = tSquared * t;      result.x = (ax * tCubed) + (bx * tSquared) + (cx * t) + cp[0].x;      result.y = (ay * tCubed) + (by * tSquared) + (cy * t) + cp[0].y;      return result;      }    //ComputeBezier以控制点cp所产生的曲线点，填入Point2D的阵列，必须分配足够的记忆体，其<sizeof(Point2D) numberOfPoints>    function ComputeBezier(cp, numberOfPoints, curve) {      var dt;      var i;      dt = 1.0 / ( numberOfPoints - 1 );      for( i = 0; i < numberOfPoints; i++)      curve[i] = PointOnCubicBezier( cp, i*dt );      }
});

js实现随机移动的萤火虫相关推荐

js实现随机选取[10,100)中的10个整数，存入一个数组，并排序。另考虑(10,100]和[10,100]两种情况。...
1.js实现随机选取[10,100)中的10个整数,存入一个数组,并排序. 1 <!DOCTYPE html> 2 <html lang="en"> 3 & ...
php js抽奖,JS做出随机抽奖系统
这次给大家带来JS做出随机抽奖系统,JS做出随机抽奖系统的注意事项有哪些,下面就是实战案例,一起来看一下. 用JavaScript实现一个简单的抽奖系统,有[开始]按钮和[停止]按钮. 功能: - 点 ...
使用原生Js实现随机点名
使用原生Js实现随机点名最近学了一点前端内容,老师让用js设计一个班里的随机点名器.就尝试写了一个,具体实现效果如图: 实现代码: <!DOCTYPE html> <html la ...
js自定义随机16进制颜色
js自定义随机16进制颜色 function colorfn() {let str = Math.random().toString().slice(2, 8);if (str.length < ...
element table row-style 实现列颜色区分以及 js生成随机色，避免相近色
实现仓库看板需求遇到的问题 table 显示的不同订单生产编码同时下线字体用不同颜色区分随机生成颜色,不能过于相似,避免灰颜与过暗步骤需要实现不同的订单号展示不同的颜色.之前有使用 " ...
js实现随机数字生成器代码
js实现随机数字生成器代码,json在线格式化代码教程如下: 输入json代码实现结果:格式化 js实现代码如下: //parser var jsl = typeof(jsl) === 'undef ...
matlab运用函数随机点名,js实现随机点名功能
本文实例为大家分享了js实现随机点名的具体代码,供大家参考,具体内容如下效果: PS:在原来的效果中很快的,但是不知怎么的录下来就变得这么慢了代码如下: 随机点名 .box{ width: 800 ...
【实践】js实现随机不重复抽取数组中元素
经过3个星期的时间终于用做完了学校的练习作品了,但是发现在用jq 做互动虽然很方便但却带来了不少的烦恼所以在以后的日子里我要好好学 js 了! 然后呢在博主之前学java 里面另我最头痛的就是做产 ...
【随机一句诗歌】【JS】随机一句诗歌，并且附带点击时间和当前时间。
来源地址:https://juejin.cn/post/7033014658181103653 [每日一点事] 在埃菲尔铁塔上,其实,共刻有72位科学家的名字- 一.代码 [核心代码] getToda ...

js实现随机移动的萤火虫

js实现随机移动的萤火虫相关推荐

最新文章

热门文章