首页
课程
路径
文章
PHP培训
精品课
下载

技术文章  >  web前端 > H5教程

HTML5 Canvas实现烟花绽放特效_html5教程技巧

原创
2016-05-16 15:45:41 2541浏览

本文为大家带来了一款，免费而又安全环保的HTML5 Canvas实现的放烟花特效。

效果如下：

代码如下：

XML/HTML Code复制内容到剪贴板
  1. nbsp;HTML>
  2. html>
  3. head>
  4. title>Canvas 实现放烟花特效title>
  5. meta charset="utf-8">
  6. meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">
  8. style type="text/css">
  9. html,body{height:100%;margin:0;padding:0}
  10. ul,li{text-indent:0;text-decoration:none;margin:0;padding:0}
  11. img{border:0}
  12. body{background-color:#000;color:#999;font:100%/18px helvetica, arial, sans-serif}
  13. canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20}
  14. #header img{width:100%; height:20%;}
  15. #bg img{width:100%; height:80%;}
  16. #header,#bg{position:fixed;left:0;right:0;z-index:10}
  17. #header{top:0}
  18. #bg{position:fixed;z-index:1;bottom:0}
  19. audio{position:fixed;display:none;bottom:0;left:0;right:0;width:100%;z-index:5}
  20. style>
  21. head>
  22. body>
  23. div id="bg">
  24. img id="bgimg" src="http://img.ivsky.com/img/tupian/pre/201508/02/yuzhou_xingkong_yu_yueliang-006.jpg">
  25. div>
  26. script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js">script>
  27. script>
  28. $(function(){
  29. var Fireworks = function(){
  30. var self = this;
  31. // 产生烟花随机数
  32. var rand = function(rMi, rMa){
  33. //按位取反运算符
  34. return ~~((Math.random()*(rMa-rMi+1))+rMi);
  35. },hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){
  36. return !(x1 + w1 x2 || x2 + w2 x1 || y1 + h1 y2 || y2 + h2 y1);
  37. };
  38. //请求动画帧
  39. window.requestAnimFrame=function(){
  40. return window.requestAnimationFrame
  41. ||window.webkitRequestAnimationFrame
  42. ||window.mozRequestAnimationFrame
  43. ||window.oRequestAnimationFrame
  44. ||window.msRequestAnimationFrame
  45. ||function(callback){
  46. window.setTimeout(callback,1000/60);
  47. }
  48. }();
  49. self.init = function(){
  50. self.canvas = document.createElement('canvas');
  51. //canvas 全屏
  52. selfself.canvas.width = self.cw = $(window).innerWidth();
  53. selfself.canvas.height = self.ch = $(window).innerHeight();
  54. self.particles = [];
  55. self.partCount = 150;
  56. self.fireworks = [];
  57. selfself.mx = self.cw/2;
  58. selfself.my = self.ch/2;
  59. self.currentHue = 30;
  60. self.partSpeed = 5;
  61. self.partSpeedVariance = 10;
  62. self.partWind = 50;
  63. self.partFriction = 5;
  64. self.partGravity = 1;
  65. self.hueMin = 0;
  66. self.hueMax = 360;
  67. self.fworkSpeed = 4;
  68. self.fworkAccel = 10;
  69. self.hueVariance = 30;
  70. self.flickerDensity = 25;
  71. self.showShockwave = true;
  72. self.showTarget = false;
  73. self.clearAlpha = 25;
  74. $(document.body).append(self.canvas);
  75. selfself.ctx = self.canvas.getContext('2d');
  76. self.ctx.lineCap = 'round';
  77. self.ctx.lineJoin = 'round';
  78. self.lineWidth = 1;
  79. self.bindEvents();
  80. self.canvasLoop();
  81. self.canvas.onselectstart = function() {
  82. return false;
  83. };
  84. };
  85. // 创建粒子
  86. self.createParticles = function(x,y, hue){
  87. var countdown = self.partCount;
  88. while(countdown--){
  89. var newParticle = {
  90. x: x,
  91. y: y,
  92. coordLast: [
  93. {x: x, y: y},
  94. {x: x, y: y},
  95. {x: x, y: y}
  96. ],
  97. angle: rand(0, 360),
  98. speed: rand(((self.partSpeed - self.partSpeedVariance) = 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed + self.partSpeedVariance)),
  99. friction: 1 - self.partFriction/100,
  100. gravity: self.partGravity/2,
  101. hue: rand(hue-self.hueVariance, hue+self.hueVariance),
  102. brightness: rand(50, 80),
  103. alpha: rand(40,100)/100,
  104. decay: rand(10, 50)/1000,
  105. wind: (rand(0, self.partWind) - (self.partWind/2))/25,
  106. lineWidth: self.lineWidth
  107. };
  108. self.particles.push(newParticle);
  109. }
  110. };
  111. // 更新粒子
  112. self.updateParticles = function(){
  113. var i = self.particles.length;
  114. while(i--){
  115. var p = self.particles[i];
  116. var radians = p.angle * Math.PI / 180;
  117. var vx = Math.cos(radians) * p.speed;
  118. var vy = Math.sin(radians) * p.speed;
  119. p.speed *= p.friction;
  120. p.coordLast[2].x = p.coordLast[1].x;
  121. p.coordLast[2].y = p.coordLast[1].y;
  122. p.coordLast[1].x = p.coordLast[0].x;
  123. p.coordLast[1].y = p.coordLast[0].y;
  124. p.coordLast[0].x = p.x;
  125. p.coordLast[0].y = p.y;
  126. p.x += vx;
  127. p.y += vy;
  128. p.y += p.gravity;
  129. p.angle += p.wind;
  130. p.alpha -= p.decay;
  131. if(!hitTest(0,0,self.cw,self.ch,p.x-p.radius, p.y-p.radius, p.radius*2, p.radius*2) || p.alpha .05){
  132. self.particles.splice(i, 1);
  133. }
  134. };
  135. };
  136. // 绘制粒子
  137. self.drawParticles = function(){
  138. var i = self.particles.length;
  139. while(i--){
  140. var p = self.particles[i];
  141. var coordRand = (rand(1,3)-1);
  142. self.ctx.beginPath();
  143. self.ctx.moveTo(Math.round(p.coordLast[coordRand].x), Math.round(p.coordLast[coordRand].y));
  144. self.ctx.lineTo(Math.round(p.x), Math.round(p.y));
  145. self.ctx.closePath();
  146. self.ctx.strokeStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+p.alpha+')';
  147. self.ctx.stroke();
  148. if(self.flickerDensity > 0){
  149. var inverseDensity = 50 - self.flickerDensity;
  150. if(rand(0, inverseDensity) === inverseDensity){
  151. self.ctx.beginPath();
  152. self.ctx.arc(Math.round(p.x), Math.round(p.y), rand(p.lineWidth,p.lineWidth+3)/2, 0, Math.PI*2, false)
  153. self.ctx.closePath();
  154. var randrandAlpha = rand(50,100)/100;
  155. self.ctx.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+randAlpha+')';
  156. self.ctx.fill();
  157. }
  158. }
  159. };
  160. };
  161. // 创建烟花
  162. self.createFireworks = function(startX, startY, targetX, targetY){
  163. var newFirework = {
  164. x: startX,
  165. y: startY,
  166. startX: startX,
  167. startY: startY,
  168. hitX: false,
  169. hitY: false,
  170. coordLast: [
  171. {x: startX, y: startY},
  172. {x: startX, y: startY},
  173. {x: startX, y: startY}
  174. ],
  175. targetX: targetX,
  176. targetY: targetY,
  177. speed: self.fworkSpeed,
  178. angle: Math.atan2(targetY - startY, targetX - startX),
  179. shockwaveAngle: Math.atan2(targetY - startY, targetX - startX)+(90*(Math.PI/180)),
  180. acceleration: self.fworkAccel/100,
  181. hue: self.currentHue,
  182. brightness: rand(50, 80),
  183. alpha: rand(50,100)/100,
  184. lineWidth: self.lineWidth
  185. };
  186. self.fireworks.push(newFirework);
  187. };
  188. // 更新烟花
  189. self.updateFireworks = function(){
  190. var i = self.fireworks.length;
  191. while(i--){
  192. var f = self.fireworks[i];
  193. self.ctx.lineWidth = f.lineWidth;
  194. vx = Math.cos(f.angle) * f.speed,
  195. vy = Math.sin(f.angle) * f.speed;
  196. f.speed *= 1 + f.acceleration;
  197. f.coordLast[2].x = f.coordLast[1].x;
  198. f.coordLast[2].y = f.coordLast[1].y;
  199. f.coordLast[1].x = f.coordLast[0].x;
  200. f.coordLast[1].y = f.coordLast[0].y;
  201. f.coordLast[0].x = f.x;
  202. f.coordLast[0].y = f.y;
  203. if(f.startX >= f.targetX){
  204. if(f.x + vx = f.targetX){
  205. ff.x = f.targetX;
  206. f.hitX = true;
  207. } else {
  208. f.x += vx;
  209. }
  210. } else {
  211. if(f.x + vx >= f.targetX){
  212. ff.x = f.targetX;
  213. f.hitX = true;
  214. } else {
  215. f.x += vx;
  216. }
  217. }
  218. if(f.startY >= f.targetY){
  219. if(f.y + vy = f.targetY){
  220. ff.y = f.targetY;
  221. f.hitY = true;
  222. } else {
  223. f.y += vy;
  224. }
  225. } else {
  226. if(f.y + vy >= f.targetY){
  227. ff.y = f.targetY;
  228. f.hitY = true;
  229. } else {
  230. f.y += vy;
  231. }
  232. }
  233. if(f.hitX && f.hitY){
  234. self.createParticles(f.targetX, f.targetY, f.hue);
  235. self.fireworks.splice(i, 1);
  236. }
  237. };
  238. };
  239. // 绘制烟花
  240. self.drawFireworks = function(){
  241. var i = self.fireworks.length;
  242. self.ctx.globalCompositeOperation = 'lighter';
  243. while(i--){
  244. var f = self.fireworks[i];
  245. self.ctx.lineWidth = f.lineWidth;
  246. var coordRand = (rand(1,3)-1);
  247. self.ctx.beginPath();
  248. self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y));
  249. self.ctx.lineTo(Math.round(f.x), Math.round(f.y));
  250. self.ctx.closePath();
  251. self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+f.alpha+')';
  252. self.ctx.stroke();
  253. if(self.showTarget){
  254. self.ctx.save();
  255. self.ctx.beginPath();
  256. self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1,8), 0, Math.PI*2, false)
  257. self.ctx.closePath();
  258. self.ctx.lineWidth = 1;
  259. self.ctx.stroke();
  260. self.ctx.restore();
  261. }
  262. if(self.showShockwave){
  263. self.ctx.save();
  264. self.ctx.translate(Math.round(f.x), Math.round(f.y));
  265. self.ctx.rotate(f.shockwaveAngle);
  266. self.ctx.beginPath();
  267. self.ctx.arc(0, 0, 1*(f.speed/5), 0, Math.PI, true);
  268. self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+rand(25, 60)/100+')';
  269. self.ctx.lineWidth = f.lineWidth;
  270. self.ctx.stroke();
  271. self.ctx.restore();
  272. }
  273. };
  274. };
  275. // 绑定事件
  276. self.bindEvents = function(){
  277. $(window).on('resize', function(){
  278. clearTimeout(self.timeout);
  279. self.timeout = setTimeout(function() {
  280. selfself.canvas.width = self.cw = $(window).innerWidth();
  281. selfself.canvas.height = self.ch = $(window).innerHeight();
  282. self.ctx.lineCap = 'round';
  283. self.ctx.lineJoin = 'round';
  284. }, 100);
  285. });
  286. $(self.canvas).on('mousedown', function(e){
  287. self.mx = e.pageX - self.canvas.offsetLeft;
  288. self.my = e.pageY - self.canvas.offsetTop;
  289. self.currentHue = rand(self.hueMin, self.hueMax);
  290. self.createFireworks(self.cw/2, self.ch, self.mx, self.my);
  291. $(self.canvas).on('mousemove.fireworks', function(e){
  292. self.mx = e.pageX - self.canvas.offsetLeft;
  293. self.my = e.pageY - self.canvas.offsetTop;
  294. self.currentHue = rand(self.hueMin, self.hueMax);
  295. self.createFireworks(self.cw/2, self.ch, self.mx, self.my);
  296. });
  297. });
  298. $(self.canvas).on('mouseup', function(e){
  299. $(self.canvas).off('mousemove.fireworks');
  300. });
  301. };
  302. self.clear = function(){
  303. self.particles = [];
  304. self.fireworks = [];
  305. self.ctx.clearRect(0, 0, self.cw, self.ch);
  306. };
  307. self.canvasLoop = function(){
  308. requestAnimFrame(self.canvasLoop, self.canvas);
  309. self.ctx.globalCompositeOperation = 'destination-out';
  310. self.ctx.fillStyle = 'rgba(0,0,0,'+self.clearAlpha/100+')';
  311. self.ctx.fillRect(0,0,self.cw,self.ch);
  312. self.updateFireworks();
  313. self.updateParticles();
  314. self.drawFireworks();
  315. self.drawParticles();
  316. };
  317. self.init();
  318. }
  319. var fworks = new Fireworks();
  320. $('#info-toggle').on('click', function(e){
  321. $('#info-inner').stop(false, true).slideToggle(100);
  322. e.preventDefault();
  323. });
  324. });
  325. script>
  326. canvas width="1400" height="449">canvas>
  327. body>
  328. html>

是不是被HTML5强大的效果惊呆了，一饱眼福了吧。

HTML5 Canvas 烟花绽放PHP课程HTML视频教程CSS视频JS视频教程Vue视频教程
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
上一条：HTML5 Canvas入门学习教程_html5教程技巧 下一条：多视角3D可旋转的HTML5 Logo动画_html5教程技巧

相关文章

查看更多
  • 热门课程
打开APP，随时随地在线学习！