javascript - 在javascript中为粒子添加不透明度?
问题描述
我正在寻找有关如何使此脚本中的粒子具有不透明度选项的帮助。我尝试用不透明度的 rgb 替换十六进制颜色编号,但它破坏了代码。
抱歉,代码格式不正确,但这就是我必须使用的全部内容,并且不太了解 javascript。感谢您对此的任何帮助。
<script type="text/javascript">
!function(a){var b="object"==typeof self&&self.self===self&&self||"object"==typeof global&&global.global===global&&global;"function"==typeof define&&define.amd?define(["exports"],function(c){b.ParticleNetwork=a(b,c)}):"object"==typeof module&&module.exports?module.exports=a(b,{}):b.ParticleNetwork=a(b,{})}(function(a,b){var c=function(a){this.canvas=a.canvas,this.g=a.g,this.particleColor=a.options.particleColor,this.x=Math.random()*this.canvas.width,this.y=Math.random()*this.canvas.height,this.velocity={x:(Math.random()-.5)*a.options.velocity,y:(Math.random()-.5)*a.options.velocity}};return c.prototype.update=function(){(this.x>this.canvas.width+20||this.x<-20)&&(this.velocity.x=-this.velocity.x),(this.y>this.canvas.height+20||this.y<-20)&&(this.velocity.y=-this.velocity.y),this.x+=this.velocity.x,this.y+=this.velocity.y},c.prototype.h=function(){this.g.beginPath(),this.g.fillStyle=this.particleColor,this.g.globalAlpha=.7,this.g.arc(this.x,this.y,1.5,0,2*Math.PI),this.g.fill()},b=function(a,b){this.i=a,this.i.size={width:this.i.offsetWidth,height:this.i.offsetHeight},b=void 0!==b?b:{},this.options={particleColor:void 0!==b.particleColor?b.particleColor:"#fff",background:void 0!==b.background?b.background:"#1a252f",interactive:void 0!==b.interactive?b.interactive:!0,velocity:this.setVelocity(b.speed),density:this.j(b.density)},this.init()},b.prototype.init=function(){if(this.k=document.createElement("div"),this.i.appendChild(this.k),this.l(this.k,{position:"absolute",top:0,left:0,bottom:0,right:0,"z-index":1}),/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(this.options.background))this.l(this.k,{background:this.options.background});else{if(!/\.(gif|jpg|jpeg|tiff|png)$/i.test(this.options.background))return console.error("Please specify a valid background image or hexadecimal color"),!1;this.l(this.k,{background:'url("'+this.options.background+'") no-repeat center',"background-size":"cover"})}if(!/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(this.options.particleColor))return console.error("Please specify a valid particleColor hexadecimal color"),!1;this.canvas=document.createElement("canvas"),this.i.appendChild(this.canvas),this.g=this.canvas.getContext("2d"),this.canvas.width=this.i.size.width,this.canvas.height=this.i.size.height,this.l(this.i,{position:"relative"}),this.l(this.canvas,{"z-index":"20",position:"relative"}),window.addEventListener("resize",function(){return this.i.offsetWidth===this.i.size.width&&this.i.offsetHeight===this.i.size.height?!1:(this.canvas.width=this.i.size.width=this.i.offsetWidth,this.canvas.height=this.i.size.height=this.i.offsetHeight,clearTimeout(this.m),void(this.m=setTimeout(function(){this.o=[];for(var a=0;a<this.canvas.width*this.canvas.height/this.options.density;a++)this.o.push(new c(this));this.options.interactive&&this.o.push(this.p),requestAnimationFrame(this.update.bind(this))}.bind(this),500)))}.bind(this)),this.o=[];for(var a=0;a<this.canvas.width*this.canvas.height/this.options.density;a++)this.o.push(new c(this));this.options.interactive&&(this.p=new c(this),this.p.velocity={x:0,y:0},this.o.push(this.p),this.canvas.addEventListener("mousemove",function(a){this.p.x=a.clientX-this.canvas.offsetLeft,this.p.y=a.clientY-this.canvas.offsetTop}.bind(this)),this.canvas.addEventListener("mouseup",function(a){this.p.velocity={x:(Math.random()-.5)*this.options.velocity,y:(Math.random()-.5)*this.options.velocity},this.p=new c(this),this.p.velocity={x:0,y:0},this.o.push(this.p)}.bind(this))),requestAnimationFrame(this.update.bind(this))},b.prototype.update=function(){this.g.clearRect(0,0,this.canvas.width,this.canvas.height),this.g.globalAlpha=1;for(var a=0;a<this.o.length;a++){this.o[a].update(),this.o[a].h();for(var b=this.o.length-1;b>a;b--){var c=Math.sqrt(Math.pow(this.o[a].x-this.o[b].x,2)+Math.pow(this.o[a].y-this.o[b].y,2));c>120||(this.g.beginPath(),this.g.strokeStyle=this.options.particleColor,this.g.globalAlpha=(120-c)/120,this.g.lineWidth=.7,this.g.moveTo(this.o[a].x,this.o[a].y),this.g.lineTo(this.o[b].x,this.o[b].y),this.g.stroke())}}0!==this.options.velocity&&requestAnimationFrame(this.update.bind(this))},b.prototype.setVelocity=function(a){return"fast"===a?1:"slow"===a?.33:"none"===a?0:.26},b.prototype.j=function(a){return"high"===a?5e3:"low"===a?2e4:isNaN(parseInt(a,10))?1e4:a},b.prototype.l=function(a,b){for(var c in b)a.style[c]=b[c]},b});
// Initialisation
var canvasDiv = document.getElementById('particle-canvas');
var options = {
particleColor: '#FFF',
background: '/wp-content/uploads/2018/09/gradient-top-solo-01-with-white.jpg',
interactive: false,
speed: 'slow',
density: 'high'
};
var particleCanvas = new ParticleNetwork(canvasDiv, options);
解决方案
您正在使用的脚本正在对颜色和背景格式进行验证。
它只允许十六进制颜色(例如#FFF 或#048CEF)和以 gif|jpg|jpeg|tiff|png 结尾的图像文件。
如果没有此验证,脚本将使用 rgba 颜色,就像它使用十六进制颜色一样。
此验证是通过使用正则表达式完成的:
/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i
// is validating the color
和
/\.(gif|jpg|jpeg|tiff|png)$/i
// is validating the file extension
如果您希望脚本允许 rgba 颜色,您可以通过添加替代颜色来修改颜色的正则表达式:
(^rgba?\(\s*[0-9]+\s*,\s*[0-9]+\s*,\s*[0-9]+\s*(?:,\s*[0-9]+(?:\.[0-9]+)?\s*)?\)$)
// this validates loosely rgb and rgba formats
@Karthick 为您提供了一个修改后的脚本,我向您提供了它为什么不起作用,以及如何通过您自己的方式修复它。
推荐阅读
- vue.js - 使用 vuex getter 重新渲染组件
- postgresql - PostgreSQL/pgAdmin4 错误:引用表“索引”的给定键没有唯一约束匹配
- node.js - Axios 在 React 前端发帖导致发帖到 MailerLite 时出错
- discord.js - discord.js反应TypeError:无法读取未定义的属性'get'
- asp.net-mvc - 如何在 Asp.net Mvc 中保存和读取 Cookie
- sql - 如何导出具有特定条件的表,然后在 postgresql 中导出 excel?
- xamarin.forms - 未找到表格布局
- kotlin - 根据 Kotlin 中的条件将列表拆分为连续元素组
- python - 将具有正值和负值的 2D numpy 数组转换为 RGB 图像
- angular - nginx favicon 版本控制