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

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

2023-10-14 697人已围观

简介 这是一个很酷的HTML5 Canvas动画，它将模拟的是我们现实生活中烟花绽放的动画特效，效果非常逼真，下面我们来简单分析一下实现这款HTML5烟花特效的过程及代码，主要由HTML代码、CSS代码以及Javascript代码组成，当然javascript代码是最重要的

　　这是一个很酷的HTML5 Canvas动画，它将模拟的是我们现实生活中烟花绽放的动画特效，效果非常逼真，但是毕竟是电脑模拟，带女朋友看就算了，效果还是差了点，呵呵。这个HTML5 Canvas动画有一点比较出色，就是其性能，Chrome上基本没有卡的感觉，就算你放出很多烟花也一样。

　　下面我们来简单分析一下实现这款HTML5烟花特效的过程及代码，主要由HTML代码、CSS代码以及Javascript代码组成，当然javascript代码是最重要的。

　　HTML代码：

XML/HTML Code复制内容到剪贴板
  1. <div id=”gui”>div>  
  2. <div id=”canvas-container”> <div id=”mountains2″>div>    
  3. <div id=”mountains1″>div><div id=”skyline”>div> div>  

　　HTML的结构非常简单，即构造了一个canvas容器，我们会利用JS在这个容器中生成一个Canvas对象。看最后的JS代码你就会知道了。

　　CSS代码：

CSS Code复制内容到剪贴板
  1. #canvas-container { background: #000 url(bg.jpg); height: 400px; left: 50%; margin: -200px 0 0 -300px; position: absolute; top: 50%; width: 600px; z-index: 2;   
  2. } canvas { cursor: crosshair; display: block; position: relative; z-index: 3;   
  3. } canvas:active { cursor: crosshair;   
  4. } #skyline { background: url(skyline.png) repeat-x 50% 0; bottombottom: 0; height: 135px; left: 0; position: absolute; width: 100%; z-index: 1;       
  5. } #mountains1 { background: url(mountains1.png) repeat-x 40% 0; bottombottom: 0; height: 200px; left: 0; position: absolute; width: 100%; z-index: 1;       
  6. } #mountains2 { background: url(mountains2.png) repeat-x 30% 0; bottombottom: 0; height: 250px; left: 0; position: absolute; width: 100%; z-index: 1;       
  7. } #gui { rightright: 0; position: fixed; top: 0; z-index: 3;   
  8. }  

　　CSS代码没什么特别，主要也就定义一下背景色和边框之类的。

　　接下来是最重要的Javascript代码。

　　Javascript代码：

JavaScript Code复制内容到剪贴板
  1. self.init = function(){       
  2.     self.dt = 0;   
  3.         self.oldTime = Date.now();   
  4.         self.canvas = document.createElement('canvas');                   
  5.         self.canvasContainer = $('#canvas-container'); var canvasContainerDisabled = document.getElementById('canvas-container');   
  6.         self.canvas.onselectstart = function() { return false;   
  7.         };   
  8.   
  9.         self.canvas.width = self.cw = 600;   
  10.         self.canvas.height = self.ch = 400;       
  11.   
  12.         self.particles = [];       
  13.         self.partCount = 30;   
  14.         self.fireworks = [];       
  15.         self.mx = self.cw/2;   
  16.         self.my = self.ch/2;   
  17.         self.currentHue = 170;   
  18.         self.partSpeed = 5; 

    上一篇：HTML5制作3D爱心动画教程 献给女友浪漫的礼物html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法

    下一篇：5 个强大的HTML5 API 函数推荐html5中几个不容错过的api或者tips小结HTML5中5个简单实用的APIHTML5 通信API 跨域门槛将不再高、数据推送也不再是梦html5中 media（播放器）的api使用指南HTML5学习笔记之History API

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网