前面我写过一个视差滚动动画的小例子,代码跟我一如既往写的JavaScript代码一样是面向过程的。
最近在学习面向对象的JavaScript,结合之前看过的一个HTML5动画的实例,感觉在做动画,特别游戏的动画效果上面向过程不是特别好用。
以下这个Canvas动画实例基于面向对象的JavaScript实现,其结构和扩展性觉得都较好。
HTML代码:
HTML代码依然只需要一个canvas标签即可,标签中的内容是canvas无法使用时的替代文本。
JavaScript代码:
首先是对内建对象Array的扩展,目的是让数组能够删除具体的对象:
然后,是动画基础对象,它包含了所需要绘制的:
接着是继承自Spirit的实际绘制对象,其中包含了对象在每帧中形状改变的方法update和绘制方法draw。由于它是直接在画布上绘制圆形,所以调用父类的构造体时会将image置为null。
完成对象的定义之后,接下来就是调用它来实现动画效果了。window.onload在本例中就相当于main方法,即程序入口。除了双缓冲的初始化以外,其中还包含了一个onmousemove事件的处理方法,用于向spirits数组中添加对象;以及需要循环执行的draw方法。spirits数组是需要在整个程序中维持的保存当前所需绘制的所有图形的数组,起初想把它作为全局变量来使用,但是这显然破坏了封装,所以将其在主方法中初始化,并在需要用到的地方作为参数来调用。
最终的效果是,当鼠标移动时,会在黑色的背景中绘制圆圈,圆圈逐渐变大变淡并最终消失。
分享到:
相关推荐
酷炫的html5 canvas全屏背景动画特效
html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效
在HTML5中,Canvas上不仅可以绘制图形和动画,还可以实现各种炫酷...这次我们给大家分享的也是一款基于HTML5 Canvas的文字动画,这款文字动画是将文字悬挂在富有弹性的细线上,用鼠标拖动文字即可让其在各个方向弹动。
全屏背景动画的实现是由canvas完成
html5 canvas小人跳舞动画特效
这是一款基于HTML5 Canvas和Rebound动画的Loading加载动画特效。该loading动画使用canvas来覆盖整个页面,并显示多边形的loading加载器来表示加载进度。
HTML5 Canvas粒子火焰动画特效,
jquery html5 canvas翻滚熔岩动画背景特效 jqueryhtml5 canvas翻滚熔岩动画背景特效
HTML5 Canvas表白爱心动画特效是一款浪漫酷炫的情人节告白爱心动画特效。
8款炫酷HTML5 Canvas星空背景动画 8款炫酷HTML5 Canvas星空背景动画 8款炫酷HTML5 Canvas星空背景动画
HTML5 Canvas赛车游戏动画,赛车游戏动画演示。
这是一款基于HTML5 Canvas实现的彩色渐变背景动画效果,跟随鼠标移动的HTML5交互式渐变背景动画特效。
我们可以在Canvas上绘制很多图形,也可以利用HTML技术在Canvas上制作一些复杂的动画,之前我们也分享过一些基于HTML5 Canvas的火焰动画,例如这个HTML5 Canvas幻彩火焰文字特效和更早以前分享的HTML5 Canvas火焰燃烧...
html5 canvas流动的瀑布动画特效 html5 canvas流动的瀑布动画特效
HTML5 Canvas氏量图转动动画实例,齿轮转动动画,齿轮是基于HTML5生成的,动画效果也是生成的,怎么样呢?是不是很酷呢?
超炫酷HTML5 Canvas蝴蝶飞舞动画 超炫酷HTML5 Canvas蝴蝶飞舞动画
html5 canvas毕达哥拉斯树生长动画特效 html5 canvas毕达哥拉斯树生长动画特效
html5 canvas熊熊火焰动画特效
Html5 canvas制作的赛车游戏动画,请注意是动画,没有交互等功能
这是一款基于three.js+HTML5 Canvas绘制实现的龙卷风动画特效,虽然不是特别逼真,但也有模有样了。