html5烟花绽放效果

最新推荐文章于 2024-07-29 16:48:07 发布

whqet

最新推荐文章于 2024-07-29 16:48:07 发布

阅读量2.3w

点赞数 34

分类专栏： html5 canvas&svg javascript 文章标签： html5 Canvas javascript

本文链接：https://blog.csdn.net/whqet/article/details/19558039

版权

今天来看一个利用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