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

实例教程 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烟花效果的核心代码就是这样，谢谢阅读，希望能帮到大家，请继续关注易采站长站，我们会努力分享更多优秀的文章。

    • 相关文章 大家在看