h5 canvas+js实现烟花效果

又快过年了,作为一名程序员,我想用自己的方式祝大家新年快乐,下图是移动端访问截图,pc端也可以访问,点击图片预览效果

h5 canvas+js实现烟花效果_第1张图片

这个效果是用h5的canvas+js实现的,主要技术点是如何实现一个烟花爆炸的模型,而不是如何绘制出图形图像,例如,为了逼真的模拟烟花爆炸过程中的细节,我们会发现烟花爆炸后的各个方向上运动的烟火都会有一个“尾巴”,从爆炸到烟花的消失,是一个渐变的过程,不是一下子就消失了,爆炸时,中心到爆炸边缘的粒子运动是一个口向下的二次函数。

h5 canvas+js实现烟花效果_第2张图片

以下是关键代码:













Your browser does not support the HTML5 canvas tag.





你可能感兴趣的:(代码积累)