辽阳网站建设辽阳,登录建设部网站,中企动力总部在哪里,建设银行官网网站人事注#xff1a;本博文代码基于ZRender 3.4.3版本开发#xff0c;对应版本库地址#xff1a;ZRender 库。 效果 实现分析 通过上面显示的效果图#xff0c;可以看出#xff0c;这种效果就是在Canvas中生成多个可移动的点#xff0c;然后根据点之间的距离来确定是否连线本博文代码基于ZRender 3.4.3版本开发对应版本库地址ZRender 库。 效果 实现分析 通过上面显示的效果图可以看出这种效果就是在Canvas中生成多个可移动的点然后根据点之间的距离来确定是否连线思路比较简单。 实现问题 保持Canvas 100%显示resize时自动调节Canvas尺寸和内部变量生成圆点实现圆点的移动及边界处理实现原点的直线连接 Canvas设置 html: canvas idmain/canvas css: #main{position: absolute; //用于100%填充left:0;top:0;background: #000;z-index: -1; //方便做背景层使用} ZRender部分 这里主要用到的形状就是Circle和Line先引入这两个组件 [zrender,zrender/graphic/shape/Circle,zrender/graphic/shape/Line], function(zrender, Circle, Line){} 设置全局及配置项用到的变量 var winH window.innerHeight; //同步页面宽、高 var winW window.innerWidth; //同步页面宽、高var opts { //可配置参数background: #000, //Canvas背景色paricalRadius: 2, //粒子半径paricalColor: rgb(0, 255, 0), //粒子颜色lineColor: rgb(0, 255, 0), //连线颜色joinLineDis: 300, //粒子间连线的要求距离particalAmount: 30, //生成的粒子数量speed: 1, //粒子速度 }; var tid; //setTimeout id防抖处理 var particals []; //用于存储partical对象 初始化ZRender var zr zrender.init(main, {width: winW, height: winH});zr.dom.style.backgroundColor opts.background; //设置背景色 窗口 resize 处理 window.addEventListener(resize, function(){clearTimeout(tid);var tid setTimeout(function(){ //防抖处理winW zr.dom.width window.innerWidth;winH zr.dom.height window.innerHeight;zr.refresh();}, 300); //这里设置了300ms的防抖间隔 }, false); 效果 创建粒子类 Partical 总结一下这个类需要以下属性 坐标位置 x, y粒子速度粒子移动角度粒子颜色粒子半径粒子的角度方向变量粒子的ZRender形状实例 方法 更新位置坐标划线 这边直接用ES6的语法来创建类 class Partical {} 构造器 constructor(){this.lines [], //用于存储连线//粒子坐标初始化this.x winW * Math.random();this.y winH * Math.random();this.speed opts.speed Math.random(); //这个random可不加主要是为了制作不同的速度的this.angle ~~(360 * Math.random());this.color opts.paricalColor;this.radius opts.paricalRadius Math.random();this.vector {x: this.speed * Math.cos(this.angle),y: this.speed * Math.sin(this.angle),} this.element new Circle({shape: {cx: this.x,cy: this.y,r: this.radius,},style: {fill: this.color,}}); }; 更新位置坐标方法 updatePosition(){//边界判断if(this.x winW || this.x 0){this.vector.x * -1;}if(this.y winH || this.y 0){this.vector.y * -1;}if(this.x winW){this.x winW;}if(this.x 0){this.x 0;}if(this.y winH){this.y winH;}if(this.y 0){this.y 0;}//更新位置坐标this.x this.vector.x;this.y this.vector.y;//更新形状坐标this.element.shape.cx this.x;this.element.shape.cy this.y;this.element.dirty(); }; 划线方法 drawLines(){//清空lines用于重绘线for(let i 0; i this.lines.length; i ){let l this.lines[i];zr.remove(l); //删除形状l null; //并解除绑定}this.lines []; //删除后清空数组//遍历各个点之间的距离for(let i 0; i particals.length; i ){let p particals[i];//勾股定理获取两点之间的距离let distance Math.sqrt(Math.pow(this.x - p.x, 2) Math.pow(this.y - p.y, 2));if(distance opts.joinLineDis distance 0){let opacity 1 - distance / opts.joinLineDis; //根据距离大小来设置透明度let color opts.lineColor.match(/\d/g); //因为这里要用到透明度所以需要重新组合rgba先把各个颜色值取到数组中let l new Line({shape: {x1: this.x,y1: this.y,x2: p.x,y2: p.y,},style: {stroke: rgba( color[0] , color[1] , color[2] , opacity ), //组建颜色fill: null},});this.lines.push(l); //存入lineszr.add(l); //加入ZRender Storage中}}; } 目前所有核心部分已完成现在来初始化它 var init function(){for (let i 0; i opts.particalAmount; i) {let p new Partical();particals.push(p); // 把粒子实例 存入particals中方便后面操作zr.add(p.element); //加入 ZRender Storage中} }; 效果 开始动画函数让粒子动起来并生成连接线 function loop(){for(let i 0; i particals.length; i ){let p particals[i];p.updatePosition(); //更新位置p.drawLines(); //绘制线段}window.requestAnimationFrame(loop); }; 最终效果 全部代码 !DOCTYPE html html langen headmeta charsetUTF-8titleDocument/titlescript src./esl.js/scriptstyle#main{position: absolute;left:0;top:0;background: #000;z-index: -1;}/style /head bodycanvas idmain/canvasscriptrequire.config({packages:[{name: zrender,location: ./src,main: zrender,},], });require([zrender,zrender/graphic/shape/Circle,zrender/graphic/shape/Line], function(zrender, Circle, Line){/** 作者王乐平* 博客http://blog.csdn.net/lecepin/*///-----全局var-----{var winH window.innerHeight;var winW window.innerWidth;var opts {background: #000, //Canvas背景色paricalRadius: 2,paricalColor: rgb(0, 255, 0),lineColor: rgb(0, 255, 0),joinLineDis: 300,particalAmount: 30,speed: 1,};var tid; //setTimeout id防抖处理var particals []; //用于存储partical对象//-----------------}var zr zrender.init(main, {width: winW, height: winH});zr.dom.style.backgroundColor opts.background;window.addEventListener(resize, function(){clearTimeout(tid);var tid setTimeout(function(){winW zr.dom.width window.innerWidth;winH zr.dom.height window.innerHeight;zr.refresh();}, 300); //这里设置了300ms的防抖间隔}, false);class Partical {constructor(){this.lines [], //用于存储连线//粒子坐标初始化this.x winW * Math.random();this.y winH * Math.random();this.speed opts.speed Math.random(); //这个random可不加主要是为了制作不同的速度的this.angle ~~(360 * Math.random());this.color opts.paricalColor;this.radius opts.paricalRadius Math.random();this.vector {x: this.speed * Math.cos(this.angle),y: this.speed * Math.sin(this.angle),} this.element new Circle({shape: {cx: this.x,cy: this.y,r: this.radius,},style: {fill: this.color,}});};updatePosition(){if(this.x winW || this.x 0){this.vector.x * -1;}if(this.y winH || this.y 0){this.vector.y * -1;}if(this.x winW){this.x winW;}if(this.x 0){this.x 0;}if(this.y winH){this.y winH;}if(this.y 0){this.y 0;}this.x this.vector.x;this.y this.vector.y;this.element.shape.cx this.x;this.element.shape.cy this.y;this.element.dirty();};drawLines(){//清空linesfor(let i 0; i this.lines.length; i ){let l this.lines[i];zr.remove(l);l null;}this.lines [];//遍历各个点之间的距离for(let i 0; i particals.length; i ){let p particals[i];//勾股定理let distance Math.sqrt(Math.pow(this.x - p.x, 2) Math.pow(this.y - p.y, 2));if(distance opts.joinLineDis distance 0){let opacity 1 - distance / opts.joinLineDis;let color opts.lineColor.match(/\d/g);let l new Line({shape: {x1: this.x,y1: this.y,x2: p.x,y2: p.y,},style: {stroke: rgba( color[0] , color[1] , color[2] , opacity ),fill: null},});this.lines.push(l);zr.add(l);}};}}var init function(){for (let i 0; i opts.particalAmount; i) {let p new Partical();particals.push(p);zr.add(p.element);}};function loop(){for(let i 0; i particals.length; i ){let p particals[i];p.updatePosition();p.drawLines();}window.requestAnimationFrame(loop);};init();loop();}); /script /body /html 博客名称王乐平博客 CSDN博客地址http://blog.csdn.net/lecepin 本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。