【烟花代码】,情人节,情侣生日礼物代码适用
【烟花代码】,情人节,情侣生日礼物代码适用
老规矩,先上效果图
图片做了加速处理,放樱花的位置,速度完全由点击控制。
1初始化粒子系统
var Particle = function(x, y, hue){this.x = x;this.y = y;this.coordLast = [{x: x, y: y},{x: x, y: y},{x: x, y: y}];this.angle = rand(0, 360);this.speed = rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed + self.partSpeedVariance));this.friction = 1 - self.partFriction/100;this.gravity = self.partGravity/2;this.hue = rand(hue-self.hueVariance, hue+self.hueVariance);this.brightness = rand(50, 80);this.alpha = rand(40,100)/100;this.decay = rand(10, 50)/1000;this.wind = (rand(0, self.partWind) - (self.partWind/2))/25;this.lineWidth = self.lineWidth;};
2粒子系统的更新
Particle.prototype.update = function(index){var radians = this.angle * Math.PI / 180;var vx = Math.cos(radians) * this.speed;var vy = Math.sin(radians) * this.speed + this.gravity;this.speed *= this.friction;this.coordLast[2].x = this.coordLast[1].x;this.coordLast[2].y = this.coordLast[1].y;this.coordLast[1].x = this.coordLast[0].x;this.coordLast[1].y = this.coordLast[0].y;this.coordLast[0].x = this.x;this.coordLast[0].y = this.y;this.x += vx * self.dt;this.y += vy * self.dt;this.angle += this.wind; this.alpha -= this.decay;if(!hitTest(0,0,self.cw,self.ch,this.x-this.radius, this.y-this.radius, this.radius*2, this.radius*2) || this.alpha < .05){ self.particles.splice(index, 1); } };
3粒子系统的画图
Particle.prototype.draw = function(){var coordRand = (rand(1,3)-1);self.ctx.beginPath(); self.ctx.moveTo(Math.round(this.coordLast[coordRand].x), Math.round(this.coordLast[coordRand].y));self.ctx.lineTo(Math.round(this.x), Math.round(this.y));self.ctx.closePath(); self.ctx.strokeStyle = 'hsla('+this.hue+', 100%, '+this.brightness+'%, '+this.alpha+')';self.ctx.stroke(); if(self.flickerDensity > 0){var inverseDensity = 50 - self.flickerDensity; if(rand(0, inverseDensity) === inverseDensity){self.ctx.beginPath();self.ctx.arc(Math.round(this.x), Math.round(this.y), rand(this.lineWidth,this.lineWidth+3)/2, 0, Math.PI*2, false)self.ctx.closePath();var randAlpha = rand(50,100)/100;self.ctx.fillStyle = 'hsla('+this.hue+', 100%, '+this.brightness+'%, '+randAlpha+')';self.ctx.fill();} }};
4创建烟花例子
self.createParticles = function(x,y, hue){var countdown = self.partCount;while(countdown--){ self.particles.push(new Particle(x, y, hue));}
};
5绑定鼠标时间,mousedown,mouseup
self.bindEvents = function(){$(window).on('resize', function(){ clearTimeout(self.timeout);self.timeout = setTimeout(function() {self.ctx.lineCap = 'round';self.ctx.lineJoin = 'round';}, 100);});$(self.canvas).on('mousedown', function(e){var randLaunch = rand(0, 5);self.mx = e.pageX - self.canvasContainer.offset().left;self.my = e.pageY - self.canvasContainer.offset().top;self.currentHue = rand(self.hueMin, self.hueMax);self.createFireworks(self.cw/2, self.ch, self.mx, self.my); $(self.canvas).on('mousemove.fireworks', function(e){var randLaunch = rand(0, 5);self.mx = e.pageX - self.canvasContainer.offset().left;self.my = e.pageY - self.canvasContainer.offset().top;self.currentHue = rand(self.hueMin, self.hueMax);self.createFireworks(self.cw/2, self.ch, self.mx, self.my); }); });$(self.canvas).on('mouseup', function(e){$(self.canvas).off('mousemove.fireworks'); });}
…完整源码,请关注公众号,后台回复领取
【烟花代码】,情人节,情侣生日礼物代码适用相关推荐
- ❀520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript
❀ 520七夕情人节告白网页代码❀-浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript 520七夕节告白,也就是中国的情人节,你除了送花你还会什么?? 快来制作高端大气上档次的D立体动 ...
- 情人节c语言程序,情人节c语言代码.doc
情人节c语言代码 篇一:一些简单的C语言程序代码 由键盘任意输入1个4位数整数,分别输出其中的个位.十位.百位.千位. /* expe 3-10 */ #include #include void m ...
- 快乐玩前端:情人节请用代码表达你的爱意,女友收到都哭了
情人节请用代码表达你的爱意,女友收到都哭了 以程序员的方式撒狗粮,专业浪漫,值得拥有! 效果演示 代码 //css代码 *{padding:0;margin:0; } .all{width:1400p ...
- 520七夕情人节告白网页代码—浪漫3D相册
520七夕情人节告白网页代码-浪漫梦幻3D相册html+css 520七夕节告白,也就是中国的情人节,你除了送花你还会什么?? 快来制作高端大气上档次的D立体动态相册表白网页吧! 七夕节是一个十分浪漫 ...
- HTML情人节表白代码,给女朋友的电子情书代码,女朋友表白代码
HTML情人节表白代码,给女朋友的电子情书代码,女朋友表白代码,可更换照片及表白内容. 使用方法 1.表白对话在assets/dialog.json 2.女朋友照片放在img中,直接替换即可 3.代码 ...
- java代码 情人节_编程语言盘点程序员情人节的表白
今天是 2 月 14 日情人节,我看公众号后台有好多人在回复关键字:情人节表白代码.我想,我作为大家的校长,必须给大家送一波福利代码啊!我是真没想到,竟然很多程序员都想用代码表白,还整的挺浪漫的,看来 ...
- Python情人节表白女神代码(修订版)
Python情人节表白女神代码(修订版) 引言:又是一年一度的情人节来临之际,最近后台私信不断,槽点:20年初写的表白女神代码无法调试出结果,临时加更本篇内容(对每一行进行了注释解析,自定义妥妥保姆级 ...
- 实验四:使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用
贺邦+原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 实验目的: 使用库函数 ...
- Lombok!代码简洁神器还是代码“亚健康”元凶?
以下文章来源方志朋的博客,回复"666"获面试宝典 关于Lombok,DD是一个重度用户,从我编写的Spring Boot教程还是Spring Cloud教程中,都可以看到几乎每个 ...
最新文章
- yum安装php和apache先装哪个,yum如何安装apache与php
- 为什么要有 hash 和 history
- 全国首个!北京手机一卡通开卡费今起取消
- 又一次Java线程卡死的调试经历
- 【LSTM时间序列预测】基于matlab贝叶斯网络优化LSTM时间序列预测【含Matlab源码 1329期】
- 超全地牢场景unity3d模型素材网站整理
- python word 英语音标_完整word版,英语音标大全,推荐文档
- web视频(点播/直播)播放器选型
- Android使用网络打印机打印
- AR,VR和MR的概念区分
- 使用计算机求函数极限示例
- 如何从零学习 React 技术栈
- Linux系统下的一些常用基本命令
- java数据结构课程设计_java数据结构课程设计
- Qt QMenuBar QMenu和QAction
- Java反序列化json内存溢出_fastjson反序列化使用不当致使内存泄露
- Java Security Architecture--Java安全体系技术文档翻译(三)
- Qt操作中你需要知道的Sqlite 玩法,隔壁Java、Python等一系列大爷看了都直呼内行!!!
- 学习前端技术都需要学哪些
- python 离散化_数据离散化与Python实现