HTML5Canvas火焰燃烧动画特效
动感十足的火焰燃烧动画，靠的就是 HTML5 里的 Canvas 搞出来的炫酷效果。火苗一跳一跳的，有真实感，像游戏里那种篝火场景一样，做交互动效或者加载动画都挺合适的。你不需要插件，直接浏览器打开index.html就能看到燃起来的感觉。
Canvas 绘制的方式是比较常见的，像之前分享过的那种HTML5 Canvas 火焰喷射效果其实也是类似的套路——就是用代码画点，再加点动态算法，让火焰动起来，看着就不那么死板。
代码部分也不复杂，用到的基本就是requestAnimationFrame那套动画渲染逻辑。你熟悉 Canvas API 的话，上手分分钟的事。里面的drawFlame()函数负责画火，整体逻辑挺清晰。
如果你想让火焰颜色换一换，或者做个打火机特效也完全没问题。像之前那个纯 CSS3 的打火机火焰动画，虽然原理不一样，但思路是相通的。你可以试着把两种结合下，玩出点花样。
哦对了，动画响应也快，手机端跑起来也比较稳。如果你在做 H5 页面或者交互展示，直接把canvas这段嵌进去，省事还吸睛。
如果你对火焰动效感兴趣，还可以看看这个：火焰燃烧滤镜 Canvas 动态效果，滤镜+动画的组合，视觉冲击力更强。
文件大小：33.71KB
评论区