HTML5Canvas彩色火焰球弹跳动画

彩色火焰球的弹跳动画效果，视觉冲击力挺强的，适合用来做网页加载动画或首页背景那种。核心就是用HTML5 Canvas画出小球，加上重力和碰撞逻辑，让它们上下弹。你只要会点基本的Canvas API，像ctx.arc、ctx.fill，就能搞定。

代码结构也挺清晰的，火焰球封装成一个FlameBall类，负责位置更新和绘制，更新逻辑里加了重力模拟和边界反弹判断，像这样：

if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
  this.speed *= -1;
}

弹跳的节奏蛮自然的，再配上带透明度的橙红色调，模拟出那种“火焰球”既烧又飘的感觉，嗯，还挺有氛围感的。

动画循环是靠requestAnimationFrame，每一帧都清掉画布重新画，响应也快，不卡。要是你想加点烟雾火花什么的，也可以在draw方法里叠加一些小粒子特效，画面会更有层次。

资源在这：彩色火焰球弹跳动画，感兴趣可以顺便看看下面这些拓展效果：

• HTML5Canvas 雾状火焰动画
• html5canvas 熊熊火焰动画特效
• 火焰喷射动画源码

如果你在搞可视化、做节日专题页，或者想让背景动起来但又不想太复杂，这段代码就蛮适合拿来用的，改起来也简单。