【疯狂的菊花系列】Canvas绘制Loading动画

上回说到用png图片来做帧动画,总的来说也没什么大问题,但是画个菊花,按固定角度旋转N次做图实在是蛋疼。

既然怎么样都要画个菊花,那不如就用canvas来画算了。对于不支持canvas的浏览器,可以用svg,原理都差不多。

这个canvas动画的原理跟帧动画也类似,先绘制第一帧的画面,然后擦掉,接着绘制第二帧,以此循环。时间间隔短的话看上去就变成动画了。

具体解释请看代码,有足够的注释,或者也可以点这里看看结果。canvas的api说明可以在这里找到。

window.onload = function(){

var canvas = document.getElementById......