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

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

2019-01-28 16:48:10丽君
  •         self.hueVariance = 30;            self.flickerDensity = 20;   
  •         self.showShockwave = false;            self.showTarget = true;   
  •         self.clearAlpha = 25;      
  •         self.canvasContainer.append(self.canvas);            self.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;            };   
  •        };  

    　　这段JS代码主要是往canvas容器中构造一个Canvas对象，并且对这个canvas对象的外观以及动画属性作了初始化。

    JavaScript Code复制内容到剪贴板
    1. var Particle = function(x, y, hue){ this.x = x; this.y = y; this.coordLast = [                {x: x, y: y},   
    2.             {x: x, y: y},                {x: x, y: y}   
    3.         ]; this.angle = rand(0, 360); this.speed = rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed + self.partSpeedVariance)); this.friction = 1 - self.partFriction/100; this.gravity = self.partGravity/2; this.hue = rand(hue-self.hueVariance, hue+self.hueVariance); this.brightness = rand(50, 80); this.alpha = rand(40,100)/100; this.decay = rand(10, 50)/1000; this.wind = (rand(0, self.partWind) - (self.partWind/2))/25; this.lineWidth = self.lineWidth;        };   
    • 相关文章 大家在看