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

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

2023-10-14 466人已围观

简介 这是一个款绚丽的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;   

    上一篇：多视角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文件上传功能

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网