HTML5Canvas小球抛物线动画特效

html5 的 Canvas 动画做点小球抛物线，其实挺适合练手的。用 Canvas 配合 JavaScript，点个按钮，小球就能顺着轨迹弹出去，视觉效果还挺直观的。这个效果里，主要就是靠canvas.getContext('2d')去拿 2D 绘图上下文，用arc()来画小球，再用requestAnimationFrame()去刷动画帧，顺滑流畅。

Canvas 的小球抛物线动画，逻辑不复杂但能锻炼不少技能。像怎么监听click事件，怎么设定速度和重力加速度，怎么根据时间算位置……都挺实用。尤其是小球飞出去的那一刻，嗯，感觉还蛮有成就感的。

还有一个点别忽略：你可以在轨迹上加点花样，比如加入弹跳效果、加个阴影、或是搞个渐变色。这样做出来不仅能跑，还能“好看”。而且这些细节，其实就是用户体验的关键哦。

如果你在搞交互动效，又不想写太复杂的三维动画，这种基于Canvas的 2D 抛物线，真挺值得一试。顺带还能学点物理公式的实现，比如那套x = v * t、y = v * t - 0.5 * g * t^2，放在代码里也是分分钟的事。

类似的动画实现也蛮多的，你可以看看这几个例子：

• 网页设计小球做抛物线运动
• HTML5 立体小球运动动画效果
• jQuery 抛物线运动轨迹动画特效
• iOS 抛物线缩放动画 demo

，如果你想练练Canvas绘图和基础动画，又对物理轨迹感兴趣，不妨试试这个效果，代码也清爽，响应也快。建议你边看边调，改改初速度或者角度，看看轨迹怎么变，蛮有意思的。