今天来看一个利用canvas+javascript实现的烟花绽放效果,大家可以到我的codepen看看DEMO,在线观看或是下载研究,悉听尊便。
首先来看看html,里面就放了一个canvas对象。
<!-- setup our canvas element -->
<canvas id="canvas">Canvas is not supported in your browser.</canvas>
css文件
body {
background: #000;
margin: 0;
}
canvas {
cursor: crosshair;
display: block;
}
接着是JS,首先使用“RequestAnimationFrame”实现动画,可以有效解决setTimeout和setInterval的浪费CPU问题。关于RequestAnimationFrame方法的特性和优势,大家可以参考以下几篇文章。
CSS-Tricks上的《Using requestAnimationFrame》
Treehouse Blog上的《Efficient Animations with requestAnimationFrame》
W3c的候选推荐标准《Timing control for script-based animations》
以及Erik Möller提供的polyfill(在旧版浏览器上模拟标准 API 的 JavaScript 补充)。
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeTo