您现在的位置是：网站首页> 编程资料编程资料

HTML5 Canvas实现烟花绽放特效实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码canvas烟花特效锦集

2021-08-31 1123人已围观

简介 这是一个款绚丽的HTML5 Canvas动画，它将模拟的是我们生活中烟花绽放的动画特效，效果非常逼真，下面我们来简单分析一下实现这款HTML5烟花特效的过程及代码，感兴趣的小伙伴们可以参考一下

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

效果如下：

代码如下：

XML/HTML Code复制内容到剪贴板
  1. >  
  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. 

    上一篇：多视角3D可旋转的HTML5 Logo动画HTML5 canvas实现雪花飘落特效HTML5实现波浪滚动起伏动画特效源码HTML5+SVG实现盒子爆炸动画特效源码 HTML5+Canvas实现日期圆形时钟特效源码HTML5实现多视角3D逼真水波动画 多视角3D逼真HTML5水波动画 HTML5的新特性(1) HTML5 Canvas实现烟花绽放特效HTML5实现Notification API桌面通知功能 html5+css3进度条倒计时动画特效代码【推荐】

    下一篇：HTML5的新特性(1) HTML5表单新特征简介与举例 WORD版HTML5新特性之用SVG绘制微信logo HTML5有哪些新特征HTML中文件上传时使用的<input type="file">元素的样式自定义文件上传input file简便美化方案(css)upfile asp文件上传 又一奇迹般的突破用Jquery实现大文件上传 Jquery Large File Upload v10.31.0ASP.NET FileUpload 文件上传控件HTML5新特性之type=file文件上传功能

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网