记录创建粒子的轻量级JavaScript库——particles.js（可用于登录等背景显示）

文章目录

  • 前言
  • 一、下载particles.js
  • 二、引入particles.js并使用
  • 三、配置数据说明
    • `如有启发，可点赞收藏哟~`

前言

本文记录使用创建粒子的轻量级JavaScript库
particles.js
可用于登录等背景显示

在这里插入图片描述

一、下载particles.js

先下载particles.js库，放在项目libs上
便于在项目上引入使用
也可复制下面代码v2.0.0版本

/* -----------------------------------------------
/* Author : Vincent Garreau  - vincentgarreau.com
/* MIT license: http://opensource.org/licenses/MIT
/* Demo / Generator : vincentgarreau.com/particles.js
/* GitHub : github.com/VincentGarreau/particles.js
/* How to use? : Check the GitHub README
/* v2.0.0
/* ----------------------------------------------- */var pJS = function(tag_id, params){var canvas_el = document.querySelector('#'+tag_id+' > .particles-js-canvas-el');/* particles.js variables with default values */this.pJS = {canvas: {el: canvas_el,w: canvas_el.offsetWidth,h: canvas_el.offsetHeight},particles: {number: {value: 400,density: {enable: true,value_area: 800}},color: {value: '#fff'},shape: {type: 'circle',stroke: {width: 0,color: '#ff0000'},polygon: {nb_sides: 5},image: {src: '',width: 100,height: 100}},opacity: {value: 1,random: false,anim: {enable: false,speed: 2,opacity_min: 0,sync: false}},size: {value: 20,random: false,anim: {enable: false,speed: 20,size_min: 0,sync: false}},line_linked: {enable: true,distance: 100,color: '#fff',opacity: 1,width: 1},move: {enable: true,speed: 2,direction: 'none',random: false,straight: false,out_mode: 'out',bounce: false,attract: {enable: false,rotateX: 3000,rotateY: 3000}},array: []},interactivity: {detect_on: 'canvas',events: {onhover: {enable: true,mode: 'grab'},onclick: {enable: true,mode: 'push'},resize: true},modes: {grab:{distance: 100,line_linked:{opacity: 1}},bubble:{distance: 200,size: 80,duration: 0.4},repulse:{distance: 200,duration: 0.4},push:{particles_nb: 4},remove:{particles_nb: 2}},mouse:{}},retina_detect: false,fn: {interact: {},modes: {},vendors:{}},tmp: {}};var pJS = this.pJS;/* params settings */if(params){Object.deepExtend(pJS, params);}pJS.tmp.obj = {size_value: pJS.particles.size.value,size_anim_speed: pJS.particles.size.anim.speed,move_speed: pJS.particles.move.speed,line_linked_distance: pJS.particles.line_linked.distance,line_linked_width: pJS.particles.line_linked.width,mode_grab_distance: pJS.interactivity.modes.grab.distance,mode_bubble_distance: pJS.interactivity.modes.bubble.distance,mode_bubble_size: pJS.interactivity.modes.bubble.size,mode_repulse_distance: pJS.interactivity.modes.repulse.distance};pJS.fn.retinaInit = function(){if(pJS.retina_detect && window.devicePixelRatio > 1){pJS.canvas.pxratio = window.devicePixelRatio; pJS.tmp.retina = true;} else{pJS.canvas.pxratio = 1;pJS.tmp.retina = false;}pJS.canvas.w = pJS.canvas.el.offsetWidth * pJS.canvas.pxratio;pJS.canvas.h = pJS.canvas.el.offsetHeight * pJS.canvas.pxratio;pJS.particles.size.value = pJS.tmp.obj.size_value * pJS.canvas.pxratio;pJS.particles.size.anim.speed = pJS.tmp.obj.size_anim_speed * pJS.canvas.pxratio;pJS.particles.move.speed = pJS.tmp.obj.move_speed * pJS.canvas.pxratio;pJS.particles.line_linked.distance = pJS.tmp.obj.line_linked_distance * pJS.canvas.pxratio;pJS.interactivity.modes.grab.distance = pJS.tmp.obj.mode_grab_distance * pJS.canvas.pxratio;pJS.interactivity.modes.bubble.distance = pJS.tmp.obj.mode_bubble_distance * pJS.canvas.pxratio;pJS.particles.line_linked.width = pJS.tmp.obj.line_linked_width * pJS.canvas.pxratio;pJS.interactivity.modes.bubble.size = pJS.tmp.obj.mode_bubble_size * pJS.canvas.pxratio;pJS.interactivity.modes.repulse.distance = pJS.tmp.obj.mode_repulse_distance * pJS.canvas.pxratio;};/* ---------- pJS functions - canvas ------------ */pJS.fn.canvasInit = function(){pJS.canvas.ctx = pJS.canvas.el.getContext('2d');};pJS.fn.canvasSize = function(){pJS.canvas.el.width = pJS.canvas.w;pJS.canvas.el.height = pJS.canvas.h;if(pJS && pJS.interactivity.events.resize){window.addEventListener('resize', function(){pJS.canvas.w = pJS.canvas.el.offsetWidth;pJS.canvas.h = pJS.canvas.el.offsetHeight;/* resize canvas */if(pJS.tmp.retina){pJS.canvas.w *= pJS.canvas.pxratio;pJS.canvas.h *= pJS.canvas.pxratio;}pJS.canvas.el.width = pJS.canvas.w;pJS.canvas.el.height = pJS.canvas.h;/* repaint canvas on anim disabled */if(!pJS.particles.move.enable){pJS.fn.particlesEmpty();pJS.fn.particlesCreate();pJS.fn.particlesDraw();pJS.fn.vendors.densityAutoParticles();}/* density particles enabled */pJS.fn.vendors.densityAutoParticles();});}};pJS.fn.canvasPaint = function(){pJS.canvas.ctx.fillRect(0, 0, pJS.canvas.w, pJS.canvas.h);};pJS.fn.canvasClear = function(){pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h);};/* --------- pJS functions - particles ----------- */pJS.fn.particle = function(color, opacity, position){/* size */this.radius = (pJS.particles.size.random ? Math.random() : 1) * pJS.particles.size.value;if(pJS.particles.size.anim.enable){this.size_status = false;this.vs = pJS.particles.size.anim.speed / 100;if(!pJS.particles.size.anim.sync){this.vs = this.vs * Math.random();}}/* position */this.x = position ? position.x : Math.random() * pJS.canvas.w;this.y = position ? position.y : Math.random() * pJS.canvas.h;/* check position  - into the canvas */if(this.x > pJS.canvas.w - this.radius*2) this.x = this.x - this.radius;else if(this.x < this.radius*2) this.x = this.x + this.radius;if(this.y > pJS.canvas.h - this.radius*2) this.y = this.y - this.radius;else if(this.y < this.radius*2) this.y = this.y + this.radius;/* check position - avoid overlap */if(pJS.particles.move.bounce){pJS.fn.vendors.checkOverlap(this, position);}/* color */this.color = {};if(typeof(color.value) == 'object'){if(color.value instanceof Array){var color_selected = color.value[Math.floor(Math.random() * pJS.particles.color.value.length)];this.color.rgb = hexToRgb(color_selected);}else{if(color.value.r != undefined && color.value.g != undefined && color.value.b != undefined){this.color.rgb = {r: color.value.r,g: color.value.g,b: color.value.b}}if(color.value.h != undefined && color.value.s != undefined && color.value.l != undefined){this.color.hsl = {h: color.value.h,s: color.value.s,l: color.value.l}}}}else if(color.value == 'random'){this.color.rgb = {r: (Math.floor(Math.random() * (255 - 0 + 1)) + 0),g: (Math.floor(Math.random() * (255 - 0 + 1)) + 0),b: (Math.floor(Math.random() * (255 - 0 + 1)) + 0)}}else if(typeof(color.value) == 'string'){this.color = color;this.color.rgb = hexToRgb(this.color.value);}/* opacity */this.opacity = (pJS.particles.opacity.random ? Math.random() : 1) * pJS.particles.opacity.value;if(pJS.particles.opacity.anim.enable){this.opacity_status = false;this.vo = pJS.particles.opacity.anim.speed / 100;if(!pJS.particles.opacity.anim.sync){this.vo = this.vo * Math.random();}}/* animation - velocity for speed */var velbase = {}switch(pJS.particles.move.direction){case 'top':velbase = { x:0, y:-1 };break;case 'top-right':velbase = { x:0.5, y:-0.5 };break;case 'right':velbase = { x:1, y:-0 };break;case 'bottom-right':velbase = { x:0.5, y:0.5 };break;case 'bottom':velbase = { x:0, y:1 };break;case 'bottom-left':velbase = { x:-0.5, y:1 };break;case 'left':velbase = { x:-1, y:0 };break;case 'top-left':velbase = { x:-0.5, y:-0.5 };break;default:velbase = { x:0, y:0 };break;}if(pJS.particles.move.straight){this.vx = velbase.x;this.vy = velbase.y;if(pJS.particles.move.random){this.vx = this.vx * (Math.random());this.vy = this.vy * (Math.random());}}else{this.vx = velbase.x + Math.random()-0.5;this.vy = velbase.y + Math.random()-0.5;}// var theta = 2.0 * Math.PI * Math.random();// this.vx = Math.cos(theta);// this.vy = Math.sin(theta);this.vx_i = this.vx;this.vy_i = this.vy;/* if shape is image */var shape_type = pJS.particles.shape.type;if(typeof(shape_type) == 'object'){if(shape_type instanceof Array){var shape_selected = shape_type[Math.floor(Math.random() * shape_type.length)];this.shape = shape_selected;}}else{this.shape = shape_type;}if(this.shape == 'image'){var sh = pJS.particles.shape;this.img = {src: sh.image.src,ratio: sh.image.width / sh.image.height}if(!this.img.ratio) this.img.ratio = 1;if(pJS.tmp.img_type == 'svg' && pJS.tmp.source_svg != undefined){pJS.fn.vendors.createSvgImg(this);if(pJS.tmp.pushing){this.img.loaded = false;}}}};pJS.fn.particle.prototype.draw = function() {var p = this;if(p.radius_bubble != undefined){var radius = p.radius_bubble; }else{var radius = p.radius;}if(p.opacity_bubble != undefined){var opacity = p.opacity_bubble;}else{var opacity = p.opacity;}if(p.color.rgb){var color_value = 'rgba('+p.color.rgb.r+','+p.color.rgb.g+','+p.color.rgb.b+','+opacity+')';}else{var color_value = 'hsla('+p.color.hsl.h+','+p.color.hsl.s+'%,'+p.color.hsl.l+'%,'+opacity+')';}pJS.canvas.ctx.fillStyle = color_value;pJS.canvas.ctx.beginPath();switch(p.shape){case 'circle':pJS.canvas.ctx.arc(p.x, p.y, radius, 0, Math.PI * 2, false);break;case 'edge':pJS.canvas.ctx.rect(p.x-radius, p.y-radius, radius*2, radius*2);break;case 'triangle':pJS.fn.vendors.drawShape(pJS.canvas.ctx, p.x-radius, p.y+radius / 1.66, radius*2, 3, 2);break;case 'polygon':pJS.fn.vendors.drawShape(pJS.canvas.ctx,p.x - radius / (pJS.particles.shape.polygon.nb_sides/3.5), // startXp.y - radius / (2.66/3.5), // startYradius*2.66 / (pJS.particles.shape.polygon.nb_sides/3), // sideLengthpJS.particles.shape.polygon.nb_sides, // sideCountNumerator1 // sideCountDenominator);break;case 'star':pJS.fn.vendors.drawShape(pJS.canvas.ctx,p.x - radius*2 / (pJS.particles.shape.polygon.nb_sides/4), // startXp.y - radius / (2*2.66/3.5), // startYradius*2*2.66 / (pJS.particles.shape.polygon.nb_sides/3), // sideLengthpJS.particles.shape.polygon.nb_sides, // sideCountNumerator2 // sideCountDenominator);break;case 'image':function draw(){pJS.canvas.ctx.drawImage(img_obj,p.x-radius,p.y-radius,radius*2,radius*2 / p.img.ratio);}if(pJS.tmp.img_type == 'svg'){var img_obj = p.img.obj;}else{var img_obj = pJS.tmp.img_obj;}if(img_obj){draw();}break;}pJS.canvas.ctx.closePath();if(pJS.particles.shape.stroke.width > 0){pJS.canvas.ctx.strokeStyle = pJS.particles.shape.stroke.color;pJS.canvas.ctx.lineWidth = pJS.particles.shape.stroke.width;pJS.canvas.ctx.stroke();}pJS.canvas.ctx.fill();};pJS.fn.particlesCreate = function(){for(var i = 0; i < pJS.particles.number.value; i++) {pJS.particles.array.push(new pJS.fn.particle(pJS.particles.color, pJS.particles.opacity.value));}};pJS.fn.particlesUpdate = function(){for(var i = 0; i < pJS.particles.array.length; i++){/* the particle */var p = pJS.particles.array[i];// var d = ( dx = pJS.interactivity.mouse.click_pos_x - p.x ) * dx + ( dy = pJS.interactivity.mouse.click_pos_y - p.y ) * dy;// var f = -BANG_SIZE / d;// if ( d < BANG_SIZE ) {//     var t = Math.atan2( dy, dx );//     p.vx = f * Math.cos(t);//     p.vy = f * Math.sin(t);// }/* move the particle */if(pJS.particles.move.enable){var ms = pJS.particles.move.speed/2;p.x += p.vx * ms;p.y += p.vy * ms;}/* change opacity status */if(pJS.particles.opacity.anim.enable) {if(p.opacity_status == true) {if(p.opacity >= pJS.particles.opacity.value) p.opacity_status = false;p.opacity += p.vo;}else {if(p.opacity <= pJS.particles.opacity.anim.opacity_min) p.opacity_status = true;p.opacity -= p.vo;}if(p.opacity < 0) p.opacity = 0;}/* change size */if(pJS.particles.size.anim.enable){if(p.size_status == true){if(p.radius >= pJS.particles.size.value) p.size_status = false;p.radius += p.vs;}else{if(p.radius <= pJS.particles.size.anim.size_min) p.size_status = true;p.radius -= p.vs;}if(p.radius < 0) p.radius = 0;}/* change particle position if it is out of canvas */if(pJS.particles.move.out_mode == 'bounce'){var new_pos = {x_left: p.radius,x_right:  pJS.canvas.w,y_top: p.radius,y_bottom: pJS.canvas.h}}else{var new_pos = {x_left: -p.radius,x_right: pJS.canvas.w + p.radius,y_top: -p.radius,y_bottom: pJS.canvas.h + p.radius}}if(p.x - p.radius > pJS.canvas.w){p.x = new_pos.x_left;p.y = Math.random() * pJS.canvas.h;}else if(p.x + p.radius < 0){p.x = new_pos.x_right;p.y = Math.random() * pJS.canvas.h;}if(p.y - p.radius > pJS.canvas.h){p.y = new_pos.y_top;p.x = Math.random() * pJS.canvas.w;}else if(p.y + p.radius < 0){p.y = new_pos.y_bottom;p.x = Math.random() * pJS.canvas.w;}/* out of canvas modes */switch(pJS.particles.move.out_mode){case 'bounce':if (p.x + p.radius > pJS.canvas.w) p.vx = -p.vx;else if (p.x - p.radius < 0) p.vx = -p.vx;if (p.y + p.radius > pJS.canvas.h) p.vy = -p.vy;else if (p.y - p.radius < 0) p.vy = -p.vy;break;}/* events */if(isInArray('grab', pJS.interactivity.events.onhover.mode)){pJS.fn.modes.grabParticle(p);}if(isInArray('bubble', pJS.interactivity.events.onhover.mode) || isInArray('bubble', pJS.interactivity.events.onclick.mode)){pJS.fn.modes.bubbleParticle(p);}if(isInArray('repulse', pJS.interactivity.events.onhover.mode) || isInArray('repulse', pJS.interactivity.events.onclick.mode)){pJS.fn.modes.repulseParticle(p);}/* interaction auto between particles */if(pJS.particles.line_linked.enable || pJS.particles.move.attract.enable){for(var j = i + 1; j < pJS.particles.array.length; j++){var p2 = pJS.particles.array[j];/* link particles */if(pJS.particles.line_linked.enable){pJS.fn.interact.linkParticles(p,p2);}/* attract particles */if(pJS.particles.move.attract.enable){pJS.fn.interact.attractParticles(p,p2);}/* bounce particles */if(pJS.particles.move.bounce){pJS.fn.interact.bounceParticles(p,p2);}}}}};pJS.fn.particlesDraw = function(){/* clear canvas */pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h);/* update each particles param */pJS.fn.particlesUpdate();/* draw each particle */for(var i = 0; i < pJS.particles.array.length; i++){var p = pJS.particles.array[i];p.draw();}};pJS.fn.particlesEmpty = function(){pJS.particles.array = [];};pJS.fn.particlesRefresh = function(){/* init all */cancelRequestAnimFrame(pJS.fn.checkAnimFrame);cancelRequestAnimFrame(pJS.fn.drawAnimFrame);pJS.tmp.source_svg = undefined;pJS.tmp.img_obj = undefined;pJS.tmp.count_svg = 0;pJS.fn.particlesEmpty();pJS.fn.canvasClear();/* restart */pJS.fn.vendors.start();};/* ---------- pJS functions - particles interaction ------------ */pJS.fn.interact.linkParticles = function(p1, p2){var dx = p1.x - p2.x,dy = p1.y - p2.y,dist = Math.sqrt(dx*dx + dy*dy);/* draw a line between p1 and p2 if the distance between them is under the config distance */if(dist <= pJS.particles.line_linked.distance){var opacity_line = pJS.particles.line_linked.opacity - (dist / (1/pJS.particles.line_linked.opacity)) / pJS.particles.line_linked.distance;if(opacity_line > 0){        /* style */var color_line = pJS.particles.line_linked.color_rgb_line;pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+opacity_line+')';pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width;//pJS.canvas.ctx.lineCap = 'round'; /* performance issue *//* path */pJS.canvas.ctx.beginPath();pJS.canvas.ctx.moveTo(p1.x, p1.y);pJS.canvas.ctx.lineTo(p2.x, p2.y);pJS.canvas.ctx.stroke();pJS.canvas.ctx.closePath();}}};pJS.fn.interact.attractParticles  = function(p1, p2){/* condensed particles */var dx = p1.x - p2.x,dy = p1.y - p2.y,dist = Math.sqrt(dx*dx + dy*dy);if(dist <= pJS.particles.line_linked.distance){var ax = dx/(pJS.particles.move.attract.rotateX*1000),ay = dy/(pJS.particles.move.attract.rotateY*1000);p1.vx -= ax;p1.vy -= ay;p2.vx += ax;p2.vy += ay;}}pJS.fn.interact.bounceParticles = function(p1, p2){var dx = p1.x - p2.x,dy = p1.y - p2.y,dist = Math.sqrt(dx*dx + dy*dy),dist_p = p1.radius+p2.radius;if(dist <= dist_p){p1.vx = -p1.vx;p1.vy = -p1.vy;p2.vx = -p2.vx;p2.vy = -p2.vy;}}/* ---------- pJS functions - modes events ------------ */pJS.fn.modes.pushParticles = function(nb, pos){pJS.tmp.pushing = true;for(var i = 0; i < nb; i++){pJS.particles.array.push(new pJS.fn.particle(pJS.particles.color,pJS.particles.opacity.value,{'x': pos ? pos.pos_x : Math.random() * pJS.canvas.w,'y': pos ? pos.pos_y : Math.random() * pJS.canvas.h}))if(i == nb-1){if(!pJS.particles.move.enable){pJS.fn.particlesDraw();}pJS.tmp.pushing = false;}}};pJS.fn.modes.removeParticles = function(nb){pJS.particles.array.splice(0, nb);if(!pJS.particles.move.enable){pJS.fn.particlesDraw();}};pJS.fn.modes.bubbleParticle = function(p){/* on hover event */if(pJS.interactivity.events.onhover.enable && isInArray('bubble', pJS.interactivity.events.onhover.mode)){var dx_mouse = p.x - pJS.interactivity.mouse.pos_x,dy_mouse = p.y - pJS.interactivity.mouse.pos_y,dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse),ratio = 1 - dist_mouse / pJS.interactivity.modes.bubble.distance;function init(){p.opacity_bubble = p.opacity;p.radius_bubble = p.radius;}/* mousemove - check ratio */if(dist_mouse <= pJS.interactivity.modes.bubble.distance){if(ratio >= 0 && pJS.interactivity.status == 'mousemove'){/* size */if(pJS.interactivity.modes.bubble.size != pJS.particles.size.value){if(pJS.interactivity.modes.bubble.size > pJS.particles.size.value){var size = p.radius + (pJS.interactivity.modes.bubble.size*ratio);if(size >= 0){p.radius_bubble = size;}}else{var dif = p.radius - pJS.interactivity.modes.bubble.size,size = p.radius - (dif*ratio);if(size > 0){p.radius_bubble = size;}else{p.radius_bubble = 0;}}}/* opacity */if(pJS.interactivity.modes.bubble.opacity != pJS.particles.opacity.value){if(pJS.interactivity.modes.bubble.opacity > pJS.particles.opacity.value){var opacity = pJS.interactivity.modes.bubble.opacity*ratio;if(opacity > p.opacity && opacity <= pJS.interactivity.modes.bubble.opacity){p.opacity_bubble = opacity;}}else{var opacity = p.opacity - (pJS.particles.opacity.value-pJS.interactivity.modes.bubble.opacity)*ratio;if(opacity < p.opacity && opacity >= pJS.interactivity.modes.bubble.opacity){p.opacity_bubble = opacity;}}}}}else{init();}/* mouseleave */if(pJS.interactivity.status == 'mouseleave'){init();}}/* on click event */else if(pJS.interactivity.events.onclick.enable && isInArray('bubble', pJS.interactivity.events.onclick.mode)){if(pJS.tmp.bubble_clicking){var dx_mouse = p.x - pJS.interactivity.mouse.click_pos_x,dy_mouse = p.y - pJS.interactivity.mouse.click_pos_y,dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse),time_spent = (new Date().getTime() - pJS.interactivity.mouse.click_time)/1000;if(time_spent > pJS.interactivity.modes.bubble.duration){pJS.tmp.bubble_duration_end = true;}if(time_spent > pJS.interactivity.modes.bubble.duration*2){pJS.tmp.bubble_clicking = false;pJS.tmp.bubble_duration_end = false;}}function process(bubble_param, particles_param, p_obj_bubble, p_obj, id){if(bubble_param != particles_param){if(!pJS.tmp.bubble_duration_end){if(dist_mouse <= pJS.interactivity.modes.bubble.distance){if(p_obj_bubble != undefined) var obj = p_obj_bubble;else var obj = p_obj;if(obj != bubble_param){var value = p_obj - (time_spent * (p_obj - bubble_param) / pJS.interactivity.modes.bubble.duration);if(id == 'size') p.radius_bubble = value;if(id == 'opacity') p.opacity_bubble = value;}}else{if(id == 'size') p.radius_bubble = undefined;if(id == 'opacity') p.opacity_bubble = undefined;}}else{if(p_obj_bubble != undefined){var value_tmp = p_obj - (time_spent * (p_obj - bubble_param) / pJS.interactivity.modes.bubble.duration),dif = bubble_param - value_tmp;value = bubble_param + dif;if(id == 'size') p.radius_bubble = value;if(id == 'opacity') p.opacity_bubble = value;}}}}if(pJS.tmp.bubble_clicking){/* size */process(pJS.interactivity.modes.bubble.size, pJS.particles.size.value, p.radius_bubble, p.radius, 'size');/* opacity */process(pJS.interactivity.modes.bubble.opacity, pJS.particles.opacity.value, p.opacity_bubble, p.opacity, 'opacity');}}};pJS.fn.modes.repulseParticle = function(p){if(pJS.interactivity.events.onhover.enable && isInArray('repulse', pJS.interactivity.events.onhover.mode) && pJS.interactivity.status == 'mousemove') {var dx_mouse = p.x - pJS.interactivity.mouse.pos_x,dy_mouse = p.y - pJS.interactivity.mouse.pos_y,dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse);var normVec = {x: dx_mouse/dist_mouse, y: dy_mouse/dist_mouse},repulseRadius = pJS.interactivity.modes.repulse.distance,velocity = 100,repulseFactor = clamp((1/repulseRadius)*(-1*Math.pow(dist_mouse/repulseRadius,2)+1)*repulseRadius*velocity, 0, 50);var pos = {x: p.x + normVec.x * repulseFactor,y: p.y + normVec.y * repulseFactor}if(pJS.particles.move.out_mode == 'bounce'){if(pos.x - p.radius > 0 && pos.x + p.radius < pJS.canvas.w) p.x = pos.x;if(pos.y - p.radius > 0 && pos.y + p.radius < pJS.canvas.h) p.y = pos.y;}else{p.x = pos.x;p.y = pos.y;}}else if(pJS.interactivity.events.onclick.enable && isInArray('repulse', pJS.interactivity.events.onclick.mode)) {if(!pJS.tmp.repulse_finish){pJS.tmp.repulse_count++;if(pJS.tmp.repulse_count == pJS.particles.array.length){pJS.tmp.repulse_finish = true;}}if(pJS.tmp.repulse_clicking){var repulseRadius = Math.pow(pJS.interactivity.modes.repulse.distance/6, 3);var dx = pJS.interactivity.mouse.click_pos_x - p.x,dy = pJS.interactivity.mouse.click_pos_y - p.y,d = dx*dx + dy*dy;var force = -repulseRadius / d * 1;function process(){var f = Math.atan2(dy,dx);p.vx = force * Math.cos(f);p.vy = force * Math.sin(f);if(pJS.particles.move.out_mode == 'bounce'){var pos = {x: p.x + p.vx,y: p.y + p.vy}if (pos.x + p.radius > pJS.canvas.w) p.vx = -p.vx;else if (pos.x - p.radius < 0) p.vx = -p.vx;if (pos.y + p.radius > pJS.canvas.h) p.vy = -p.vy;else if (pos.y - p.radius < 0) p.vy = -p.vy;}}// defaultif(d <= repulseRadius){process();}// bang - slow motion mode// if(!pJS.tmp.repulse_finish){//   if(d <= repulseRadius){//     process();//   }// }else{//   process();// }}else{if(pJS.tmp.repulse_clicking == false){p.vx = p.vx_i;p.vy = p.vy_i;}}}}pJS.fn.modes.grabParticle = function(p){if(pJS.interactivity.events.onhover.enable && pJS.interactivity.status == 'mousemove'){var dx_mouse = p.x - pJS.interactivity.mouse.pos_x,dy_mouse = p.y - pJS.interactivity.mouse.pos_y,dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse);/* draw a line between the cursor and the particle if the distance between them is under the config distance */if(dist_mouse <= pJS.interactivity.modes.grab.distance){var opacity_line = pJS.interactivity.modes.grab.line_linked.opacity - (dist_mouse / (1/pJS.interactivity.modes.grab.line_linked.opacity)) / pJS.interactivity.modes.grab.distance;if(opacity_line > 0){/* style */var color_line = pJS.particles.line_linked.color_rgb_line;pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+opacity_line+')';pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width;//pJS.canvas.ctx.lineCap = 'round'; /* performance issue *//* path */pJS.canvas.ctx.beginPath();pJS.canvas.ctx.moveTo(p.x, p.y);pJS.canvas.ctx.lineTo(pJS.interactivity.mouse.pos_x, pJS.interactivity.mouse.pos_y);pJS.canvas.ctx.stroke();pJS.canvas.ctx.closePath();}}}};/* ---------- pJS functions - vendors ------------ */pJS.fn.vendors.eventsListeners = function(){/* events target element */if(pJS.interactivity.detect_on == 'window'){pJS.interactivity.el = window;}else{pJS.interactivity.el = pJS.canvas.el;}/* detect mouse pos - on hover / click event */if(pJS.interactivity.events.onhover.enable || pJS.interactivity.events.onclick.enable){/* el on mousemove */pJS.interactivity.el.addEventListener('mousemove', function(e){if(pJS.interactivity.el == window){var pos_x = e.clientX,pos_y = e.clientY;}else{var pos_x = e.offsetX || e.clientX,pos_y = e.offsetY || e.clientY;}pJS.interactivity.mouse.pos_x = pos_x;pJS.interactivity.mouse.pos_y = pos_y;if(pJS.tmp.retina){pJS.interactivity.mouse.pos_x *= pJS.canvas.pxratio;pJS.interactivity.mouse.pos_y *= pJS.canvas.pxratio;}pJS.interactivity.status = 'mousemove';});/* el on onmouseleave */pJS.interactivity.el.addEventListener('mouseleave', function(e){pJS.interactivity.mouse.pos_x = null;pJS.interactivity.mouse.pos_y = null;pJS.interactivity.status = 'mouseleave';});}/* on click event */if(pJS.interactivity.events.onclick.enable){pJS.interactivity.el.addEventListener('click', function(){pJS.interactivity.mouse.click_pos_x = pJS.interactivity.mouse.pos_x;pJS.interactivity.mouse.click_pos_y = pJS.interactivity.mouse.pos_y;pJS.interactivity.mouse.click_time = new Date().getTime();if(pJS.interactivity.events.onclick.enable){switch(pJS.interactivity.events.onclick.mode){case 'push':if(pJS.particles.move.enable){pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb, pJS.interactivity.mouse);}else{if(pJS.interactivity.modes.push.particles_nb == 1){pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb, pJS.interactivity.mouse);}else if(pJS.interactivity.modes.push.particles_nb > 1){pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb);}}break;case 'remove':pJS.fn.modes.removeParticles(pJS.interactivity.modes.remove.particles_nb);break;case 'bubble':pJS.tmp.bubble_clicking = true;break;case 'repulse':pJS.tmp.repulse_clicking = true;pJS.tmp.repulse_count = 0;pJS.tmp.repulse_finish = false;setTimeout(function(){pJS.tmp.repulse_clicking = false;}, pJS.interactivity.modes.repulse.duration*1000)break;}}});}};pJS.fn.vendors.densityAutoParticles = function(){if(pJS.particles.number.density.enable){/* calc area */var area = pJS.canvas.el.width * pJS.canvas.el.height / 1000;if(pJS.tmp.retina){area = area/(pJS.canvas.pxratio*2);}/* calc number of particles based on density area */var nb_particles = area * pJS.particles.number.value / pJS.particles.number.density.value_area;/* add or remove X particles */var missing_particles = pJS.particles.array.length - nb_particles;if(missing_particles < 0) pJS.fn.modes.pushParticles(Math.abs(missing_particles));else pJS.fn.modes.removeParticles(missing_particles);}};pJS.fn.vendors.checkOverlap = function(p1, position){for(var i = 0; i < pJS.particles.array.length; i++){var p2 = pJS.particles.array[i];var dx = p1.x - p2.x,dy = p1.y - p2.y,dist = Math.sqrt(dx*dx + dy*dy);if(dist <= p1.radius + p2.radius){p1.x = position ? position.x : Math.random() * pJS.canvas.w;p1.y = position ? position.y : Math.random() * pJS.canvas.h;pJS.fn.vendors.checkOverlap(p1);}}};pJS.fn.vendors.createSvgImg = function(p){/* set color to svg element */var svgXml = pJS.tmp.source_svg,rgbHex = /#([0-9A-F]{3,6})/gi,coloredSvgXml = svgXml.replace(rgbHex, function (m, r, g, b) {if(p.color.rgb){var color_value = 'rgba('+p.color.rgb.r+','+p.color.rgb.g+','+p.color.rgb.b+','+p.opacity+')';}else{var color_value = 'hsla('+p.color.hsl.h+','+p.color.hsl.s+'%,'+p.color.hsl.l+'%,'+p.opacity+')';}return color_value;});/* prepare to create img with colored svg */var svg = new Blob([coloredSvgXml], {type: 'image/svg+xml;charset=utf-8'}),DOMURL = window.URL || window.webkitURL || window,url = DOMURL.createObjectURL(svg);/* create particle img obj */var img = new Image();img.addEventListener('load', function(){p.img.obj = img;p.img.loaded = true;DOMURL.revokeObjectURL(url);pJS.tmp.count_svg++;});img.src = url;};pJS.fn.vendors.destroypJS = function(){cancelAnimationFrame(pJS.fn.drawAnimFrame);canvas_el.remove();pJSDom = null;};pJS.fn.vendors.drawShape = function(c, startX, startY, sideLength, sideCountNumerator, sideCountDenominator){// By Programming Thomas - https://programmingthomas.wordpress.com/2013/04/03/n-sided-shapes/var sideCount = sideCountNumerator * sideCountDenominator;var decimalSides = sideCountNumerator / sideCountDenominator;var interiorAngleDegrees = (180 * (decimalSides - 2)) / decimalSides;var interiorAngle = Math.PI - Math.PI * interiorAngleDegrees / 180; // convert to radiansc.save();c.beginPath();c.translate(startX, startY);c.moveTo(0,0);for (var i = 0; i < sideCount; i++) {c.lineTo(sideLength,0);c.translate(sideLength,0);c.rotate(interiorAngle);}//c.stroke();c.fill();c.restore();};pJS.fn.vendors.exportImg = function(){window.open(pJS.canvas.el.toDataURL('image/png'), '_blank');};pJS.fn.vendors.loadImg = function(type){pJS.tmp.img_error = undefined;if(pJS.particles.shape.image.src != ''){if(type == 'svg'){var xhr = new XMLHttpRequest();xhr.open('GET', pJS.particles.shape.image.src);xhr.onreadystatechange = function (data) {if(xhr.readyState == 4){if(xhr.status == 200){pJS.tmp.source_svg = data.currentTarget.response;pJS.fn.vendors.checkBeforeDraw();}else{console.log('Error pJS - Image not found');pJS.tmp.img_error = true;}}}xhr.send();}else{var img = new Image();img.addEventListener('load', function(){pJS.tmp.img_obj = img;pJS.fn.vendors.checkBeforeDraw();});img.src = pJS.particles.shape.image.src;}}else{console.log('Error pJS - No image.src');pJS.tmp.img_error = true;}};pJS.fn.vendors.draw = function(){if(pJS.particles.shape.type == 'image'){if(pJS.tmp.img_type == 'svg'){if(pJS.tmp.count_svg >= pJS.particles.number.value){pJS.fn.particlesDraw();if(!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame);else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);}else{//console.log('still loading...');if(!pJS.tmp.img_error) pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);}}else{if(pJS.tmp.img_obj != undefined){pJS.fn.particlesDraw();if(!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame);else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);}else{if(!pJS.tmp.img_error) pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);}}}else{pJS.fn.particlesDraw();if(!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame);else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);}};pJS.fn.vendors.checkBeforeDraw = function(){// if shape is imageif(pJS.particles.shape.type == 'image'){if(pJS.tmp.img_type == 'svg' && pJS.tmp.source_svg == undefined){pJS.tmp.checkAnimFrame = requestAnimFrame(check);}else{//console.log('images loaded! cancel check');cancelRequestAnimFrame(pJS.tmp.checkAnimFrame);if(!pJS.tmp.img_error){pJS.fn.vendors.init();pJS.fn.vendors.draw();}}}else{pJS.fn.vendors.init();pJS.fn.vendors.draw();}};pJS.fn.vendors.init = function(){/* init canvas + particles */pJS.fn.retinaInit();pJS.fn.canvasInit();pJS.fn.canvasSize();pJS.fn.canvasPaint();pJS.fn.particlesCreate();pJS.fn.vendors.densityAutoParticles();/* particles.line_linked - convert hex colors to rgb */pJS.particles.line_linked.color_rgb_line = hexToRgb(pJS.particles.line_linked.color);};pJS.fn.vendors.start = function(){if(isInArray('image', pJS.particles.shape.type)){pJS.tmp.img_type = pJS.particles.shape.image.src.substr(pJS.particles.shape.image.src.length - 3);pJS.fn.vendors.loadImg(pJS.tmp.img_type);}else{pJS.fn.vendors.checkBeforeDraw();}};/* ---------- pJS - start ------------ */pJS.fn.vendors.eventsListeners();pJS.fn.vendors.start();};/* ---------- global functions - vendors ------------ */Object.deepExtend = function(destination, source) {for (var property in source) {if (source[property] && source[property].constructor &&source[property].constructor === Object) {destination[property] = destination[property] || {};arguments.callee(destination[property], source[property]);} else {destination[property] = source[property];}}return destination;
};window.requestAnimFrame = (function(){return  window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame    ||window.oRequestAnimationFrame      ||window.msRequestAnimationFrame     ||function(callback){window.setTimeout(callback, 1000 / 60);};
})();window.cancelRequestAnimFrame = ( function() {return window.cancelAnimationFrame         ||window.webkitCancelRequestAnimationFrame ||window.mozCancelRequestAnimationFrame    ||window.oCancelRequestAnimationFrame      ||window.msCancelRequestAnimationFrame     ||clearTimeout
} )();function hexToRgb(hex){// By Tim Down - http://stackoverflow.com/a/5624139/3493650// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;hex = hex.replace(shorthandRegex, function(m, r, g, b) {return r + r + g + g + b + b;});var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);return result ? {r: parseInt(result[1], 16),g: parseInt(result[2], 16),b: parseInt(result[3], 16)} : null;
};function clamp(number, min, max) {return Math.min(Math.max(number, min), max);
};function isInArray(value, array) {return array.indexOf(value) > -1;
}/* ---------- particles.js functions - start ------------ */window.pJSDom = [];window.particlesJS = function(tag_id, params){//console.log(params);/* no string id? so it's object params, and set the id with default id */if(typeof(tag_id) != 'string'){params = tag_id;tag_id = 'particles-js';}/* no id? set the id to default id */if(!tag_id){tag_id = 'particles-js';}/* pJS elements */var pJS_tag = document.getElementById(tag_id),pJS_canvas_class = 'particles-js-canvas-el',exist_canvas = pJS_tag.getElementsByClassName(pJS_canvas_class);/* remove canvas if exists into the pJS target tag */if(exist_canvas.length){while(exist_canvas.length > 0){pJS_tag.removeChild(exist_canvas[0]);}}/* create canvas element */var canvas_el = document.createElement('canvas');canvas_el.className = pJS_canvas_class;/* set size canvas */canvas_el.style.width = "100%";canvas_el.style.height = "100%";/* append canvas */var canvas = document.getElementById(tag_id).appendChild(canvas_el);/* launch particle.js */if(canvas != null){pJSDom.push(new pJS(tag_id, params));}};window.particlesJS.load = function(tag_id, path_config_json, callback){/* load json config */var xhr = new XMLHttpRequest();xhr.open('GET', path_config_json);xhr.onreadystatechange = function (data) {if(xhr.readyState == 4){if(xhr.status == 200){var params = JSON.parse(data.currentTarget.response);window.particlesJS(tag_id, params);if(callback) callback();}else{console.log('Error pJS - XMLHttpRequest status: '+xhr.status);console.log('Error pJS - File config not found');}}};xhr.send();};

二、引入particles.js并使用

以vue3组件为例

  • components/particles/index.vue
<script lang="ts" src="./index.ts" />
<template><div class="login flex-align-center"><div class="brand-info particles" id="particles-js"></div></div>
</template><style scoped lang="less">.login {width: 100%;height: 100%;background: #273b84;
}
.brand-info {color: #fff;width: 100%;height: 100%;position: absolute;left: 0;background: none;background-color: transparent;&.particles {top: 0;z-index: 6}&.waves {height: 50%;bottom: 0;z-index: 5;}
}
</style>
  • components/particles/index.ts
import { defineComponent, onMounted } from 'vue'
import ParticlesJS from "@/assets/libs/particles.js"export default defineComponent({setup() {onMounted(() => {/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */// ParticlesJS('particles-js');ParticlesJS.load('particles-js', 'particles.json', function() {console.log('callback - particles.js config loaded');});})return {};},
});
  • particles.json（效果配置参数，放在根目录）
{"particles": {"number": {"value": 80,"density": {"enable": true,"value_area": 800}},"color": {"value": "#ffffff"},"shape": {"type": "circle","stroke": {"width": 0,"color": "#000000"},"polygon": {"nb_sides": 5},"image": {"src": "img/github.svg","width": 100,"height": 100}},"opacity": {"value": 0.5,"random": false,"anim": {"enable": false,"speed": 1,"opacity_min": 0.1,"sync": false}},"size": {"value": 10,"random": true,"anim": {"enable": false,"speed": 80,"size_min": 0.1,"sync": false}},"line_linked": {"enable": true,"distance": 300,"color": "#ffffff","opacity": 0.4,"width": 2},"move": {"enable": true,"speed": 12,"direction": "none","random": false,"straight": false,"out_mode": "out","bounce": false,"attract": {"enable": false,"rotateX": 600,"rotateY": 1200}}},"interactivity": {"detect_on": "canvas","events": {"onhover": {"enable": false,"mode": "repulse"},"onclick": {"enable": true,"mode": "push"},"resize": true},"modes": {"grab": {"distance": 800,"line_linked": {"opacity": 1}},"bubble": {"distance": 800,"size": 80,"duration": 2,"opacity": 0.8,"speed": 3},"repulse": {"distance": 400,"duration": 0.4},"push": {"particles_nb": 4},"remove": {"particles_nb": 2}}},"retina_detect": true}

按照上述搞完之后，查看页面可能报错，如果显示下图错误，可在particles.js文件内搜索window.particlesJS修改为particlesJS即可
在这里插入图片描述

  • 具体效果如下（注意需要先定义背景色为非白色，不然会看不出效果、或者修改配置文件particles.json的particles.color.value 为其他颜色，默认是白色）
    在这里插入图片描述

三、配置数据说明

particles.json配置说明，默认可不设置，有默认值

具体key选项类型/注释例子
particles.number.value数字40
particles.number.density.value_area数字800
particles.color.valueHEX（字符串）
RGB（对象）
HSL（对象）
数组选择（HEX）
随机（字符串）		"#b61924"
{r:182, g:25, b:36}
{h:356, s:76, l:41}
["#b61924", "#333333", "999999"]
"random"
particles.shape.type字符串
数组选择		"circle"
"edge"
"triangle"
"polygon"
"star"
"image"
["circle", "triangle", "image"]
particles.shape.stroke.width数字2
particles.shape.stroke.color十六进制（字符串）"#222222"
particles.shape.polygon.nb_slides数字5
particles.shape.image.src路径链接
svg / png / gif / jpg 		"assets/img/yop.svg"
"http://mywebsite.com/assets/img/yop.png"
particles.shape.image.width数字
（纵横比）		100
particles.shape.image.height数字
（纵横比）		100
particles.opacity.value数字（0 到 1）0.75
particles.opacity.random布尔值true/false
particles.opacity.anim.enable布尔值true/false
particles.opacity.anim.speed数字3
particles.opacity.anim.opacity_min数字（0 到 1）0.25
particles.opacity.anim.sync布尔值true/false
particles.size.value数字20
particles.size.random布尔值true/false
particles.size.anim.enable布尔值true/false
particles.size.anim.speed数字3
particles.size.anim.size_min数字0.25
particles.size.anim.sync布尔值true/false
particles.line_linked.enable布尔值true/false
particles.line_linked.distance数字150
particles.line_linked.color十六进制（字符串）#ffffff
particles.line_linked.opacity数字（0 到 1）0.5
particles.line_linked.width数字1.5
particles.move.enable布尔值true/false
particles.move.speed数字4
particles.move.direction细绳"none"
"top"
"top-right"
"right"
"bottom-right"
"bottom"
"bottom-left"
"left"
"top-left"
particles.move.random布尔值true/false
particles.move.straight布尔值true/false
particles.move.out_mode字符串
（画布外） 		"out"
"bounce"
particles.move.bounce布尔值
（粒子之间）		true/false
particles.move.attract.enable布尔值true/false
particles.move.attract.rotateX数字3000
particles.move.attract.rotateY数字1500
interactivity.detect_on细绳"canvas", "window"
interactivity.events.onhover.enable布尔值true/false
interactivity.events.onhover.mode字符串
数组选择		"grab"
"bubble"
"repulse"
["grab", "bubble"]
interactivity.events.onclick.enable布尔值true/false
interactivity.events.onclick.mode字符串
数组选择		"push"
"remove"
"bubble"
"repulse"
["push", "repulse"]
interactivity.events.resize布尔值true/false
interactivity.events.modes.grab.distance数字100
interactivity.events.modes.grab.line_linked.opacity数字（0 到 1）0.75
interactivity.events.modes.bubble.distance数字100
interactivity.events.modes.bubble.size数字40
interactivity.events.modes.bubble.duration数量
（第二个）		0.4
interactivity.events.modes.repulse.distance数字200
interactivity.events.modes.repulse.duration数量
（第二个）		1.2
interactivity.events.modes.push.particles_nb数字4
interactivity.events.modes.push.particles_nb数字4
retina_detect布尔值true/false

如有启发，可点赞收藏哟~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/183087.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

msyql迁移到mongodb

msyql迁移到mongodb

关系型数据库迁移到mongodb的理由 高并发需求&#xff0c;关系型数据库不容易扩展 快速迭代 灵活的json模式 大数据量需求 应用迁移难度&#xff1a; 关系型到关系 oracle-》mysql oracle -》 postgresql 关系到文档- oracle -》 mongodb 需要考虑&#xff1a; 总体架构&#…
阅读更多...
vue3实现元素拖拽移动功能

vue3实现元素拖拽移动功能

效果图 实现拖拽移动 首先我们给需要实现功能的元素加一个draggable"true"让元素能够被拖拽 先来认识两个搭配draggable属性一起使用的事件——ondragstart和ondragend&#xff0c;它们的定义分别为&#xff1a; ①. ondragstart 事件在用户开始拖动元素或选择的文…
阅读更多...
如何使用录屏软件在电脑录制PDF文件

如何使用录屏软件在电脑录制PDF文件

我有一个PDF文件&#xff0c;想用录屏软件将它录制下来并添加上详细的注释&#xff0c;然后发给客户看&#xff0c;请问应该如何录制呢&#xff1f;有没有推荐的录屏软件呢&#xff1f; 不用担心&#xff0c;本文将会详细的为您讲解如何使用录屏软件在电脑端录制PDF文件&#…
阅读更多...
使用MechanicalSoup库的爬虫程序

使用MechanicalSoup库的爬虫程序

1. 首先&#xff0c;我们需要导入MechanicalSoup库和requests库&#xff0c;这两个库都是Python中爬虫常用的库。 2. 接着&#xff0c;我们要设置一个代理服务器&#xff0c;使用proxy_host和proxy_port参数来指定。 3. 使用requests.get方法来获取网页的HTML代码。 4. 使用Bea…
阅读更多...
内存函数​（memcpy、memmove、memset、memcmp）

内存函数​（memcpy、memmove、memset、memcmp）

目录 一、memcpy的使用和实现 使用&#xff1a; 模拟实现&#xff1a; 二、memmove 使用和模拟实现 模拟实现&#xff1a; 2.1难点&#xff1a; 覆盖拷贝所在的问题 memset的使用 memcmp的函数的使用​ 一、memcpy的使用和实现 memcpy 拷贝的就是不重叠的内存。 参数…
阅读更多...
Linux(fork+exec创建进程)

Linux(fork+exec创建进程)

1.进程创建 内核设计与实现43页; 执行了3次ps -f ,ps -f的父进程的ID(PPID)都是一样的,即bash. 实际上Linux上这个bash就是不断的复制自身,然后把复制出来的用exec替换成想要执行的程序(比如ps); 运行ps,发现ps是bash的一个子进程;原因就是bash把自己复制一份,然后替换成ps;…
阅读更多...
竞赛选题 题目：基于深度学习的中文对话问答机器人

竞赛选题 题目：基于深度学习的中文对话问答机器人

文章目录 0 简介1 项目架构2 项目的主要过程2.1 数据清洗、预处理2.2 分桶2.3 训练 3 项目的整体结构4 重要的API4.1 LSTM cells部分&#xff1a;4.2 损失函数&#xff1a;4.3 搭建seq2seq框架&#xff1a;4.4 测试部分&#xff1a;4.5 评价NLP测试效果&#xff1a;4.6 梯度截断…
阅读更多...
dbeaver连接amabri-hbase

dbeaver连接amabri-hbase

目录 尝试过程 解决之道 总结 尝试过程 注意此章节为记录试错过程&#xff0c;无需跟随操作&#xff0c;仅作试错记录。真正操作方法请看“解决之道”章节 环境ambari安装的hbase2.1.6 使用apche phoenix默认驱动配置 备注&#xff1a;Apache Phoenix 是一个开源的、基于…
阅读更多...
fastadmin 如何引入自己的js

fastadmin 如何引入自己的js

在需要的界面中&#xff1a;如何实例说明&#xff1a; 中<script> function zhuruJs(url) { let temp document.createElement( script ); temp.setAttribute( type, text/javascript" );temp.src urL; document.head . appendChild(temp); zhuruJs(location…
阅读更多...
ffmpeg 免安装，配置环境变量

ffmpeg 免安装，配置环境变量

1、下载ffmpeg https://download.csdn.net/download/qq284489030/88579595 2、解压 解压ffmpeg-4.4-essentials_build.zip到目标文件夹&#xff0c;比如 d:\apps下&#xff1b; 3、配置环境变量 &#xff08;1&#xff09;电脑桌面鼠标右键点击“此电脑”&#xff0c;弹出…
阅读更多...
脚本格式问题记录

脚本格式问题记录

服务器上的一些脚本迁移到其他服务上发生的小问题 问题&#xff1a;执行一个在win10系统编写好的shell脚本&#xff0c;放到Linux上执行报错如下&#xff1a; bash: ./xxx.sh: /bin/bash^M: bad interpreter: No such file or directory 原因&#xff1a;window系统写的脚本&a…
阅读更多...
iMazing是什么软件?2024最新版本如何下载

iMazing是什么软件?2024最新版本如何下载

iMazing是一款功能强大的iOS设备管理软件&#xff0c;它可以帮助用户备份和管理他们的iPhone、iPad或iPod Touch上的数据。除此之外&#xff0c;它还可以将备份数据转移到新的设备中、管理应用程序、导入和导出媒体文件等。本文将详细介绍iMazing的功能和安全性&#xff0c;并教…
阅读更多...
实验一 SAS 基本操作和数据表的导入 2023-11-29

实验一 SAS 基本操作和数据表的导入 2023-11-29

一、上机目的 熟悉SAS的集成环境并掌握它的基本操作。理解SAS程序的结构&#xff0c;理解其中的过程&#xff0c;过程选项&#xff0c;语句&#xff0c;语句选项等概念&#xff0c;掌握SAS编程技术。 二、上机内容 主要有SAS操作界面、SAS窗口操作、SAS菜单操作、SAS按钮操作…
阅读更多...
用函数初始化数组

用函数初始化数组

将数组全部初始化为相同值 对于一般情况 一般是用函数&#xff0c;传什么数就初始化为什么数 #define _CRT_SECURE_NO_WARNINGS 1 #include<stdio.h> void init(int arr[], int len, int num) {int i;for (i 0; i < len; i){arr[i] num;} } int main() {int arr[…
阅读更多...
如何判断哪种屋顶适合安装光伏板？

如何判断哪种屋顶适合安装光伏板？

随着国家对可再生能源的推广和大力发展&#xff0c;光伏板开始被越来越多人所熟知。而将光伏板安装在家庭楼顶上&#xff0c;不仅可以有效节省土地和楼房面积&#xff0c;还能够为家庭提供更多的经济和环保效益&#xff0c;成为了越来越多人的选择。哪种屋顶适合安装光伏板呢&a…
阅读更多...
php爬虫实现把目标页面变成自己的网站页面

php爬虫实现把目标页面变成自己的网站页面

最近又被烦的不行&#xff0c;琐事不断&#xff0c;要是比起懒来一个人比一个人懒&#xff0c;但是懒要转换成动力啊&#xff0c;能让自己真正的偷懒&#xff0c;而不是浪费时间。每天还是需要不断的学习的&#xff0c;才能更好的提高效率&#xff0c;把之前做的简单小功能爬虫…
阅读更多...
第二部分 系统管理篇

第二部分 系统管理篇

文件和目录管理 Linux基础 在Linux操作系统中&#xff0c;一切都是文件。Linux文件是区分大小写的。 Linux文件的拓展名和它的种类没有任何关系 Linux的目录结构为树状结构&#xff0c;顶级的目录为根目录“/”。 文件类型 用file命令查看文件类型 文件操作命令 1.mkdir创…
阅读更多...
el-select实现分屏效果

el-select实现分屏效果

动态绑定class值 &#xff0c;多种判断 :class"type 8 ? home-stye-2 : type 24 ? home-stye-1 : home-stye-3" <div class"home-right-top"><div class"home-right-top-video"><el-row :gutter"20"><el-c…
阅读更多...
Android进阶之路 - TextView文本渐变

Android进阶之路 - TextView文本渐变

那天做需求的时候&#xff0c;遇到一个小功能&#xff0c;建立在前人栽树&#xff0c;后人乘凉的情况下&#xff0c;仅用片刻就写完了&#xff1b;说来惭愧&#xff0c;我以前并未写过文本渐变的需求&#xff0c;脑中也仅有一个shape渐变带来的大概思路&#xff0c;回头来看想着…
阅读更多...
福州大学《嵌入式系统综合设计》 实验九：ROI视频编码

福州大学《嵌入式系统综合设计》 实验九：ROI视频编码

一、实验目的 ROI视频编码即感兴趣区域视频编码&#xff0c;即针对感兴趣区域进行重点编码&#xff0c;提高编码质量&#xff0c;而对非感兴趣区域采用低质量编码。通过这种方法可以降低码率。本实验即让同学们能够在算能的FFMPEG接口下实现基于ROI的视频编码。 二、实验内容…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023