返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码

2019-01-28 16:48:10丽君

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

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

　　Javascript代码：

JavaScript Code复制内容到剪贴板
  1. self.init = function(){            self.dt = 0;   
  2.         self.oldTime = Date.now();            self.canvas = document.createElement('canvas');                   
  3.         self.canvasContainer = $('#canvas-container'); var canvasContainerDisabled = document.getElementById('canvas-container');            self.canvas.onselectstart = function() { return false;   
  4.         };      
  5.         self.canvas.width = self.cw = 600;            self.canvas.height = self.ch = 400;       
  6.            self.particles = [];       
  7.         self.partCount = 30;            self.fireworks = [];       
  8.         self.mx = self.cw/2;            self.my = self.ch/2;   
  9.         self.currentHue = 170;            self.partSpeed = 5;   
  10.         self.partSpeedVariance = 10;            self.partWind = 50;   
  11.         self.partFriction = 5;            self.partGravity = 1;   
  12.         self.hueMin = 150;            self.hueMax = 200;   
  13.         self.fworkSpeed = 2;            self.fworkAccel = 4;   
相关文章 大家在看