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

2019-01-28 16:48:10丽君
  •             self.ctx.save();                self.ctx.translate(Math.round(this.x), Math.round(this.y));   
  •             self.ctx.rotate(this.shockwaveAngle);                self.ctx.beginPath();   
  •             self.ctx.arc(0, 0, 1*(this.speed/5), 0, Math.PI, true);                self.ctx.strokeStyle = 'hsla('+this.hue+', 100%, '+this.brightness+'%, '+rand(25, 60)/100+')';   
  •             self.ctx.lineWidth = this.lineWidth;                self.ctx.stroke();   
  •             self.ctx.restore();            }                                    
  •     };  

      这段JS代码是创建烟花实例的,我们也可以从draw方法中看出,当我们鼠标点击画布中的某点时,烟花发射的目的地就在那个点上。

      这款HTML5 Canvas烟花效果的核心代码就是这样,谢谢阅读,希望能帮到大家,请继续关注易采站长站,我们会努力分享更多优秀的文章。