首页 / HTML5 / HTML5Canvas实现烟花绽放的特效

HTML5Canvas实现烟花绽放的特效

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了HTML5Canvas实现烟花绽放的特效，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10321字，纯文字阅读大概需要15分钟。

内容图文

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

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

效果如下：

HTML5Canvas实现烟花绽放的特效 - 文章图片

代码如下：

<!DOCTYPE HTML>
<html>
  <head>
    <title>Canvas 实现放烟花特效</title>
 <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style type="text/css">
  html,body{height:100%;margin:0;padding:0}   
  ul,li{text-indent:0;text-decoration:none;margin:0;padding:0}   
  img{border:0}   
  body{background-color:#000;color:#999;font:100%/18px helvetica, arial, sans-serif}   
  canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20}   
  #header img{width:100%; height:20%;}   
  #bg img{width:100%; height:80%;}   
  #header,#bg{position:fixed;left:0;right:0;z-index:10}   
  #header{top:0}   
  #bg{position:fixed;z-index:1;bottom:0}   
  audio{position:fixed;display:none;bottom:0;left:0;right:0;width:100%;z-index:5}   
 </style>
  </head>
  <body>
 <p id="bg">
  <img id="bgimg" src="http://img.ivsky.com/img/tupian/pre/201508/02/yuzhou_xingkong_yu_yueliang-006.jpg">
 </p>
 <script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
 <script>
  $(function(){   
   var Fireworks = function(){   
    var self = this;   
    // 产生烟花随机数   
    var rand = function(rMi, rMa){   
     //按位取反运算符   
     return ~~((Math.random()*(rMa-rMi+1))+rMi);   
    },hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){   
     return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);   
    };   
    //请求动画帧   
    window.requestAnimFrame=function(){   
     return window.requestAnimationFrame   
      ||window.webkitRequestAnimationFrame   
      ||window.mozRequestAnimationFrame   
      ||window.oRequestAnimationFrame   
      ||window.msRequestAnimationFrame   
      ||function(callback){   
       window.setTimeout(callback,1000/60);   
      }   
    }();   
    self.init = function(){    
     self.canvas = document.createElement('canvas');     
     //canvas 全屏   
     selfself.canvas.width = self.cw = $(window).innerWidth();   
     selfself.canvas.height = self.ch = $(window).innerHeight();     
     self.particles = [];    
     self.partCount = 150;   
     self.fireworks = [];    
     selfself.mx = self.cw/2;   
     selfself.my = self.ch/2;   
     self.currentHue = 30;   
     self.partSpeed = 5;   
     self.partSpeedVariance = 10;   
     self.partWind = 50;   
     self.partFriction = 5;   
     self.partGravity = 1;   
     self.hueMin = 0;   
     self.hueMax = 360;   
     self.fworkSpeed = 4;   
     self.fworkAccel = 10;   
     self.hueVariance = 30;   
     self.flickerDensity = 25;   
     self.showShockwave = true;   
     self.showTarget = false;   
     self.clearAlpha = 25;   
     $(document.body).append(self.canvas);   
     selfself.ctx = self.canvas.getContext('2d');   
     self.ctx.lineCap = 'round';   
     self.ctx.lineJoin = 'round';   
     self.lineWidth = 1;   
     self.bindEvents();      
     self.canvasLoop();   
     self.canvas.onselectstart = function() {   
      return false;   
     };   
    };     
    // 创建粒子   
    self.createParticles = function(x,y, hue){   
     var countdown = self.partCount;   
     while(countdown--){   
      var newParticle = {   
       x: x,   
       y: y,   
       coordLast: [   
        {x: x, y: y},   
        {x: x, y: y},   
        {x: x, y: y}   
       ],   
       angle: rand(0, 360),   
       speed: rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed + self.partSpeedVariance)),   
       friction: 1 - self.partFriction/100,   
       gravity: self.partGravity/2,   
       hue: rand(hue-self.hueVariance, hue+self.hueVariance),   
       brightness: rand(50, 80),   
       alpha: rand(40,100)/100,   
       decay: rand(10, 50)/1000,   
       wind: (rand(0, self.partWind) - (self.partWind/2))/25,   
       lineWidth: self.lineWidth   
      };       
      self.particles.push(newParticle);   
     }   
    };   
    // 更新粒子   
    self.updateParticles = function(){   
     var i = self.particles.length;   
     while(i--){   
      var p = self.particles[i];   
      var radians = p.angle * Math.PI / 180;   
      var vx = Math.cos(radians) * p.speed;   
      var vy = Math.sin(radians) * p.speed;   
      p.speed *= p.friction;   
      p.coordLast[2].x = p.coordLast[1].x;   
      p.coordLast[2].y = p.coordLast[1].y;   
      p.coordLast[1].x = p.coordLast[0].x;   
      p.coordLast[1].y = p.coordLast[0].y;   
      p.coordLast[0].x = p.x;   
      p.coordLast[0].y = p.y;   
      p.x += vx;   
      p.y += vy;   
      p.y += p.gravity;   
      p.angle += p.wind;       
      p.alpha -= p.decay;   
      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){        
       self.particles.splice(i, 1);    
      }   
     };   
    };   
    // 绘制粒子   
    self.drawParticles = function(){   
     var i = self.particles.length;   
     while(i--){   
      var p = self.particles[i];          
      var coordRand = (rand(1,3)-1);   
      self.ctx.beginPath();           
      self.ctx.moveTo(Math.round(p.coordLast[coordRand].x), Math.round(p.coordLast[coordRand].y));   
      self.ctx.lineTo(Math.round(p.x), Math.round(p.y));   
      self.ctx.closePath();       
      self.ctx.strokeStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+p.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(p.x), Math.round(p.y), rand(p.lineWidth,p.lineWidth+3)/2, 0, Math.PI*2, false)   
        self.ctx.closePath();   
        var randrandAlpha = rand(50,100)/100;   
        self.ctx.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+randAlpha+')';   
        self.ctx.fill();   
       }    
      }   
     };   
    };   
    // 创建烟花       
    self.createFireworks = function(startX, startY, targetX, targetY){   
     var newFirework = {   
      x: startX,   
      y: startY,   
      startX: startX,   
      startY: startY,   
      hitX: false,   
      hitY: false,   
      coordLast: [   
       {x: startX, y: startY},   
       {x: startX, y: startY},   
       {x: startX, y: startY}   
      ],   
      targetX: targetX,   
      targetY: targetY,   
      speed: self.fworkSpeed,   
      angle: Math.atan2(targetY - startY, targetX - startX),   
      shockwaveAngle: Math.atan2(targetY - startY, targetX - startX)+(90*(Math.PI/180)),   
      acceleration: self.fworkAccel/100,   
      hue: self.currentHue,   
      brightness: rand(50, 80),   
      alpha: rand(50,100)/100,   
      lineWidth: self.lineWidth   
     };      
     self.fireworks.push(newFirework);   
    };   
    // 更新烟花   
    self.updateFireworks = function(){   
     var i = self.fireworks.length;   
     while(i--){   
      var f = self.fireworks[i];   
      self.ctx.lineWidth = f.lineWidth;   
      vx = Math.cos(f.angle) * f.speed,   
      vy = Math.sin(f.angle) * f.speed;   
      f.speed *= 1 + f.acceleration;       
      f.coordLast[2].x = f.coordLast[1].x;   
      f.coordLast[2].y = f.coordLast[1].y;   
      f.coordLast[1].x = f.coordLast[0].x;   
      f.coordLast[1].y = f.coordLast[0].y;   
      f.coordLast[0].x = f.x;   
      f.coordLast[0].y = f.y;   
      if(f.startX >= f.targetX){   
       if(f.x + vx <= f.targetX){   
        ff.x = f.targetX;   
        f.hitX = true;   
       } else {   
        f.x += vx;   
       }   
      } else {   
       if(f.x + vx >= f.targetX){   
        ff.x = f.targetX;   
        f.hitX = true;   
       } else {   
        f.x += vx;   
       }   
      }   
      if(f.startY >= f.targetY){   
       if(f.y + vy <= f.targetY){   
        ff.y = f.targetY;   
        f.hitY = true;   
       } else {   
        f.y += vy;   
       }   
      } else {   
       if(f.y + vy >= f.targetY){   
        ff.y = f.targetY;   
        f.hitY = true;   
       } else {   
        f.y += vy;   
       }   
      }       
      if(f.hitX && f.hitY){   
       self.createParticles(f.targetX, f.targetY, f.hue);   
       self.fireworks.splice(i, 1);   
      }   
     };   
    };   
    // 绘制烟花   
    self.drawFireworks = function(){   
     var i = self.fireworks.length;   
     self.ctx.globalCompositeOperation = 'lighter';   
     while(i--){   
      var f = self.fireworks[i];     
      self.ctx.lineWidth = f.lineWidth;   
      var coordRand = (rand(1,3)-1);        
      self.ctx.beginPath();          
      self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y));   
      self.ctx.lineTo(Math.round(f.x), Math.round(f.y));   
      self.ctx.closePath();   
      self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+f.alpha+')';   
      self.ctx.stroke();    
      if(self.showTarget){   
       self.ctx.save();   
       self.ctx.beginPath();   
       self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1,8), 0, Math.PI*2, false)   
       self.ctx.closePath();   
       self.ctx.lineWidth = 1;   
       self.ctx.stroke();   
       self.ctx.restore();   
      }   
      if(self.showShockwave){   
       self.ctx.save();   
       self.ctx.translate(Math.round(f.x), Math.round(f.y));   
       self.ctx.rotate(f.shockwaveAngle);   
       self.ctx.beginPath();   
       self.ctx.arc(0, 0, 1*(f.speed/5), 0, Math.PI, true);   
       self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+rand(25, 60)/100+')';   
       self.ctx.lineWidth = f.lineWidth;   
       self.ctx.stroke();   
       self.ctx.restore();   
      }   
     };   
    };   
    // 绑定事件   
    self.bindEvents = function(){   
     $(window).on('resize', function(){      
      clearTimeout(self.timeout);   
      self.timeout = setTimeout(function() {   
       selfself.canvas.width = self.cw = $(window).innerWidth();   
       selfself.canvas.height = self.ch = $(window).innerHeight();   
       self.ctx.lineCap = 'round';   
       self.ctx.lineJoin = 'round';   
      }, 100);   
     });   
     $(self.canvas).on('mousedown', function(e){   
      self.mx = e.pageX - self.canvas.offsetLeft;   
      self.my = e.pageY - self.canvas.offsetTop;   
      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){   
       self.mx = e.pageX - self.canvas.offsetLeft;   
       self.my = e.pageY - self.canvas.offsetTop;   
       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');            
     });   
    };   
    self.clear = function(){   
     self.particles = [];   
     self.fireworks = [];   
     self.ctx.clearRect(0, 0, self.cw, self.ch);   
    };   
    self.canvasLoop = function(){   
     requestAnimFrame(self.canvasLoop, self.canvas);      
     self.ctx.globalCompositeOperation = 'destination-out';   
     self.ctx.fillStyle = 'rgba(0,0,0,'+self.clearAlpha/100+')';   
     self.ctx.fillRect(0,0,self.cw,self.ch);   
     self.updateFireworks();   
     self.updateParticles();   
     self.drawFireworks();      
     self.drawParticles();   
    };   
    self.init();     
   }   
   var fworks = new Fireworks();   
   $('#info-toggle').on('click', function(e){   
    $('#info-inner').stop(false, true).slideToggle(100);   
    e.preventDefault();   
   });    
  });   
 </script>
 <canvas width="1400" height="449"></canvas>
  </body>
</html>

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

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

内容总结

以上是互联网集市为您收集整理的HTML5Canvas实现烟花绽放的特效全部内容，希望文章能够帮你解决HTML5Canvas实现烟花绽放的特效所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/387026.html

来源：【匿名】

【上一篇】HTML5嵌入音频和视频的方法【下一篇】html5如何获取php数据

更多 ►

【HTML5Canvas实现烟花绽放的特效】教程文章相关的互联网学习教程文章

html5 canvas图片反色【代码】

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script> window.onload = function () {var oc = document.getElementById(‘c1‘);var ogc = oc.getContext(‘2d‘);var yimg = new Image();yimg.onload = function (){draw(this);}yimg.src = ‘img/5-5.jpg‘;function draw(obj){oc.width = obj.width;oc.height = obj.height*2;ogc.drawImage(obj,0,0);var oimg = ogc.getImageData(0,0,ob...

HTML5 Canvas arc()函数//////////////////////(转)【代码】【图】

实例创建一个圆形：var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(100,75,50,0,2*Math.PI); ctx.stroke();浏览器支持Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 arc() 方法。注释：Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。定义和用法arc() 方法创建弧/曲线（用于创建圆或部分圆）。提示：如需通过 arc() 来创建圆，请把起始角设置为 0...

html5 canvas头像裁剪上传【代码】【图】

效果：在博客里有另一篇头像裁剪是用actionscript实现的头像裁剪上传，这里拥护html5,用canvas实现下。前两次的右键是为了说明不是用flash做的。如果想要更严谨的，有技术支持的这个东西的话，可以用kissy的http://gallery.kissyui.com/imgcrop/2.0/guide/index.html.原理很简单：裁剪框是用html做的，canvas的作用在于每次移动，变形后根据裁剪框的位置坐标以及大小，绘制图像的部分并缩放，还有绘制裁剪框区域外的灰色区域，优点...

HTML5 Canvas绘图系列之一：圆弧等基础图形的实现【代码】【图】

之前的一个微信项目已经要结项了，最近整理一下项目中使用较多的canvas画图方面的知识吧，打算写个3,4篇的样子。本篇主要介绍基础操作和弧线画法。之后再写一下趋势图，直方图，文本图像处理的。言归正传，canvas元素本身是一个容器元素，提供一块画布，用脚本来实现想要画什么。为了演示使用，我们新增一个空的aspx页。首先，我们新增一个canvas元素： <canvas id="myConvas" style="display:block; margin:...

html5之Canvas路径绘图、坐标变换应用实例【图】

在上一篇中我们了解html5的Canvas ，在这一篇中不用多说，写一个html5的时钟应用程序试手。在这里主要设置了坐标变换的平移（translate）和旋转变换（ratate），以及html5 Canvas的路径绘图，beginPath，closePath，rect，arc等，还有就是html5 Canvas路径绘图重要的绘图状态的保存和恢复机制，save，restore。多的也不说了，直接上代码，有不解的欢迎提问，以及对我的建议指教都可以。 ff下效果图：代码：复制代码代码如下:<h...

html5 canvas 移动小方块【代码】

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> body{background:pink;} #c1{background:white;} </style><script> window.onload = function () {var oc = document.getElementById(‘c1‘);var ogc = oc.getContext(‘2d‘);var num = 0;setInterval(function (){num++;ogc.clearRect(0,0,oc.width,oc.height);ogc.fillRect(num,num,100,100);},20)} </script> </head><body><canv...

PHP实现将HTML5中Canvas图像保存到服务器的方法

本文实例讲述了PHP实现将HTML5中Canvas图像保存到服务器的方法。分享给大家供大家参考。具体实现方法如下：一、问题：在几年前HTML5还没有流行的时候，我们的项目经理曾经向我提出这样一个需求：让项目评审专家们在评审结束时用笔在平板电脑上进行电子签名。这需要我们评审软件里提供这样一个功能：打开浏览器，登录，进入评审意见页，页面最下部有个方块区域，用户在这里用触摸笔进行签名，然后这个签名将会保持的服务器上。这样的...

HTML5学习记录-----canvas学习之鼠标选取放大图像【图】

canvas鼠标选取放大欢迎大家有好点建议可以提。js高级扣扣群：170798851 欢迎来交流学习??? git项目地址：https://github.com/Jonavin/HTML5_Study/*** Created by wsf on 2014-11-23.*/ ;//分号为了保证代码合并时不出错 (function(win){"use strict";var doc = win.document,cvs = doc.querySelector("#canvas"),selector = doc.getElementById("selector"),restBtn = doc.getElementById("resetBtn"),ctx = cvs.getContext("2d...

绘制SVG内容到Canvas的HTML5应用【图】

SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术，两种绘制图形方式各有优缺点，但两者并非水火不容，尤其是SVG内容可直接绘制在Canvas上的功能，使得两者可以完美的融合在一起，让Canvas可享用到现有丰富的SVG素材，并不失SVG矢量无级缩放的特点。《基于HTML5的Drag and Drop生成图片Base64信息》这篇虽然展示的是拖拽普通栅格图片的效果，但你也可以直接拖拽SVG格式的图片进行显示，只不过普通图片的格式数据为data:...

html5 canvas fillRect坐标和大小的问题解决方法

fillRect(100,100,100,100) 前2个100是指坐标，后2个100是指宽和高。今天学习html5 的canvas，发现fillRect的坐标和大小一直不对，研究了半天，发现canvas的宽度和高度必须内联在canvas标签中才对。郁闷了半天。错误的方式1: 复制代码代码如下:<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #mycanvas{ width: 200px; height: 200px; background: yellow; } </style> </head...

HTML5 创建canvas元素示例代码

HTML5 创建canvas元素复制代码代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset = utf-8"> <title>HTML5</title> <script type="text/javascript" charset = "utf-8">  function pageLoaded() { alert(‘HTML5 页面加载完毕!‘); } </script> </head> <body ...

Html5 Canvas斗地主游戏【代码】【图】

过完年来公司，没什么事，主管说研究下html5 游戏，然后主管就给了一个斗地主的demo，随后我就开始看代码，现在我看了html5以及canvas相关知识和斗地主的demo后，自己用demo上的素材试着写了个斗地主，代码没重构好，欢迎赐教。演示地址:CanVas斗地主话不多说，下面就一步一步解释下吧只有一个common.js文件1、资源类 1var Resource = Class.create();2$.extend(Resource.prototype, {3 initial...

html5 canvas 五子棋游戏【代码】

<!doctype html> <html> <head><meta charset="utf-8"><title>五子棋</title><style type="text/css">*{margin: 0px;padding: 0px;}canvas{background: url(images/bg.jpg);}canvas:hover{cursor: pointer;}</style> </head><body><canvas width="800" height="800" id="canvas"></canvas><script type="text/javascript">//初始化var canvas = document.getElementById(‘canvas‘);var context = canvas.getContext(‘2d‘);var ...

玩转 html5 (二) ---- 用 canvas 结合脚本在画布上画简单的图 (html5 又一强大功能)

在html5中可以使用canvas标签在画布上画图，先直接上代码，这篇文章先简单介绍一下canvas的使用方法，简单画几个圆，矩形，三角形，写字。在代码中均给出了注释，在这里特别强调的一点是：使用canvas画图时有时候必须beginPath和colsePath,但有时不需要，为了防止出现问题，可以在每次重新画一个图时重新开启路径，画完后关闭路径。这些代码是在猎豹浏览器上实现的，有些浏览器可能不支持。[html] view plaincopy <!DOCTYPE html> ...

html5-Canvas【图】

canvas介绍及使用方法一、canvas简介　　?<canvas> 是 html5 新增的，一个可以使用脚本(通常为 javascript) 在其中绘制图像的 html 元素。它可以用来制作照片集或者制作简单的动画，甚至可以进行实时视频处理和渲染。 ?它最初由苹果内部使用自己 macos x webkit 推出，供应用程序使用像仪表盘的构件和 safari 浏览器使用。后来，有人通过 gecko 内核的浏览器 (尤其是 mozilla和firefox)，opera 和 chrome 和超文本网络应用技术工作...

首页 / HTML5 / HTML5Canvas实现烟花绽放的特效

HTML5Canvas实现烟花绽放的特效

内容导读

内容图文

内容总结

内容备注

内容手机端

【HTML5Canvas实现烟花绽放的特效】教程文章相关的互联网学习教程文章

HTML5CANVAS - 相关标签

HTML5 - 技术教程分类

HTML5 - 最新教程

HTML5 - 最热教程