jquery实现canvas彩色光束喷泉粒子线条喷射动画效果代码
代码语言:html
所属分类:粒子
代码描述:jquery实现canvas彩色光束喷泉粒子线条喷射动画效果代码
代码标签: jquery canvas 彩色 光束 喷泉 粒子 线条 喷射 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <style> html, body{ width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } .container{ width: 100%; height: 100%; margin: 0; padding: 0; background-color: #000000; } </style> </head> <body> <div id="jsi-fountain-container" class="container"></div> <script> var RENDERER = { GRAVITY : 0.05, BASE_RATE : 0.6, OFFSET_RATE : 1 / 50, PARTICLE_COUNT : 30, init : function(){ this.setParameters(); this.setup(); this.reconstructMethods(); this.bindEvent(); this.render(); }, setParameters : function(){ this.$window = $(window); this.$container = $('#jsi-fountain-container'); this.$canvas = $('<canvas />'); this.context = this.$canvas.appendTo(this.$container).get(0).getContext('2d'); this.particles = []; this.fountains = []; this.resizeIds = []; }, setup : function(){ this.particles.length = 0; this.fountains.length = 0; this.resizeIds.length = 0; this.width = this.$container.width(); this.height = this.$container.height(); this.$canvas.attr({width : this.width, height : this.height}); this.velocity = 1; while(true){ var distance = 0, velocity = this.velocity; while(velocity >= 0){ velocity -= this.GRAVITY; distance += velocity; } if(distance > Math.min(this.height * (this.BASE_RATE - this.OFFSET_RATE), 500)){ this.velocity--; break; } this.velocity++; } this.gradient = this.context.createLinearGradient(0, this.height * this.BASE_RATE, 0, this.height); this.gradient.addColorStop(0, 'hsla(210, 80%, 5%, 0.5)'); this.gradient.addColorStop(0.1, 'hsla(210, 80%, 5%, 0.8)'); this.gradient.addColorStop(1, 'hsla(210, 80%, 5%, 1)'); this.createElements(); }, createElements : function(){ for(var i = 0, count = this.PARTICLE_COUNT * this.width / 500 * this.height / 500; i < count; i++){ this.particles.push(new PARTICLE(this)); } for(var i = -2; i <= 2; i++){ this.fountains.push(new FOUNTAIN(this, this.width / 2 + i * Math.max(250, this.width / 5), this.height * (this.BASE_RATE - this.OFFSET_RATE), i)); } }, watchWindowSize : function(){ while(this.resizeIds.length > 0){ clearTimeout(this.resizeIds.pop()); } this.tmpWidth = this.$window.width(); this.tmpHeight = this.$window.height(); this.resizeIds.push(setTimeout(this.jdugeToStopResize, this.RESIZE_INTERVAL)); }, jdugeToStopResize : function(){ var width = this.$window.width(), height = this.$window.height(), stopped = (width == this.tmpWidth && height == this.tmpHeight); this.tmpWidth = width; this.tmpHeight = height; if(stopped){ this.setup(); } }, reconstructMethods : function(){ this.watchWindowSize = this.watchWindowSize.bind(this); this.jdugeToStopResize = this.jdugeToStopResize.bind(this); this.render = this.render.bind(this); }, bindEvent : function(){ this.$window.on('resize', this.watchWindowSize); }, getRandomValue : function(min, max){ return min + (max - min) * Math.random(); }, render : function(){ requestAnimationFrame(this.render); this.context.fillStyle = 'hsla(0, 0%, 0%, 0.3)'; this.context.fillRect(0, 0, this.width, this.height); this.context.save(); this.context.globalCompositeOperation = 'lighter'; for(var i = 0, count = this.particles.length; i < count; i++){ this.particles[i].render(this.context); } for(var i = 0, count = this.fountains.length; i < count; i++){ this.fountains[i].render(this.context); } this.context.restore(); this.context.save(); this.context.translate(0, this.height * this.BASE_RATE); this.context.scale(1, -(1 - this.BASE_RATE) / this.BASE_RATE); this.context.drawImage(this.$canvas.get(0), 0, 0, this.width, this.height * this.BASE_RATE, 0, -this.height * this.BASE_RATE, this.width, this.height * this.BASE_RATE); this.context.restore(); this.context.fillStyle = this.gradient; this.context.fillRect(0, this.height * this.BASE_RATE, this.width, this.height * (1 - this.BASE_RATE)); } }; var PARTICLE = function(renderer){ this.renderer = renderer; this.init(); }; PARTICLE.prototype = { THRESHOLD : 10, init : function(){ this.x = this.renderer.getRandomValue(-this.THRESHOLD, this.renderer.width + this.THRESHOLD); this.y = this.renderer.getRandomValue(-this.THRESHOLD, this.renderer.height * this.renderer.BASE_RATE + this.THRESHOLD); this.v.........完整代码请登录后点击上方下载按钮下载查看
网友评论0