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

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

2019-01-28 16:48:10丽君
  •                 self.ctx.arc(Math.round(this.x), Math.round(this.y), rand(this.lineWidth,this.lineWidth+3)/2, 0, Math.PI*2, false)  self.ctx.closePath(); var randAlpha = rand(50,100)/100;                    self.ctx.fillStyle = 'hsla('+this.hue+', 100%, '+this.brightness+'%, '+randAlpha+')';   
  •                 self.ctx.fill();                }       
  •         }        };  

    　　这段JS代码的功能是实现烟花爆炸后的小颗粒的绘制，从draw方法中可以看出，创建几个随机点，烟花颗粒即可在这个范围的随机点中散落。

    JavaScript Code复制内容到剪贴板
    1. var Firework = function(startX, startY, targetX, targetY){ this.x = startX; this.y = startY; this.startX = startX; this.startY = startY; this.hitX = false; this.hitY = false; this.coordLast = [                {x: startX, y: startY},   
    2.             {x: startX, y: startY},                {x: startX, y: startY}   
    3.         ]; this.targetX = targetX; this.targetY = targetY; this.speed = self.fworkSpeed; this.angle = Math.atan2(targetY - startY, targetX - startX); this.shockwaveAngle = Math.atan2(targetY - startY, targetX - startX)+(90*(Math.PI/180)); this.acceleration = self.fworkAccel/100; this.hue = self.currentHue; this.brightness = rand(50, 80); this.alpha = rand(50,100)/100; this.lineWidth = self.lineWidth; this.targetRadius = 1;        };   
    4.        Firework.prototype.update = function(index){   
    5.         self.ctx.lineWidth = this.lineWidth;      
    • 相关文章 大家在看