canvas教程

7个案例教你学会制作HTML5 Canvas动画

字号+ 作者:H5之家 来源:H5之家 2017-02-20 16:01 我要评论( )

“传媒圈”(www.mediacircle.cn)是浙江日报报业集团主办的聚合性媒体网站,由浙江传媒研究院和新媒体中心合力打造。网站以自动聚合传媒类微博为特色,及时提供

说起HTML5,可能让你印象更深的是其基于Canvas的动画特效,虽然Canvas在HTML5中的应用并不全都是动画制作,但其动画效果确实让人震惊。本文收集了7个效果绝佳的HTML5 Canvas动画,包括画板、文字、图表等,希望你会喜欢。

 

  1、HTML5 Canvas画板画图工具 可定义笔刷和画布

  HTML5 Canvas还有一个比较实用的应用,那就是网络画板,这样我们就可以在网页上直接进行画图操作。今天要分享的这款HTML5 Canvas画图工具就可以简单实现网络画图的功能,我们可以自定义笔刷的类型、粗细、颜色,也可以定义画布的大小和背景颜色等。我们也可以对这款HTML5画图工具进行扩展,让它的画图功能更加完善。推荐阅读:之前也跟大家分享过一款基于HTML5 Canvas的画板涂鸦动画应用,其中新增了回撤和清空等功能。

 

  2、HTML5 Canvas瀑布动画 超逼真

  这次我们来分享一款很酷的HTML5 Canvas瀑布动画,瀑布动画非常逼真。整个瀑布动画像是从石头缝里流出来的溪水,然后沿着悬崖飞落下来,效果非常不错。

 

 

  3、HTML5 Canvas可拖动的弹性大树摇摆动画

  它是一款基于HTML5 Canvas的大树摇摆动画,这款HTML5动画的特点是我们可以拖拽树枝,从而让整棵树摇摆起来,这样就真实地模拟了大树从摇摆到静止的整个过程,相当逼真。

 

  4、HTML5统计图表数据初始动画

  之前我们已经向大家分享很多HTML5图表,比如这18个基于HTML5 Canvas开发的最佳图表库。今天要介绍的也是一款HTML5图表,该统计图表的特点是图表数据在初始化的时候会出现很酷的动画特效,特别是环形百分比应用还会出现百分比数的动态更新。

 

  5、HTML5 Canvas花朵生成器 可生成多种样式的花朵

  HTML5非常流行,利用HTML5制作动画也非常方便,今天要分享一款利用HTML5 Canvas制作的花朵生成器,我们只需要在Canvas画布上点击鼠标,即可动态生成各种颜色样式的花朵,并且每一朵花都可以缓慢地旋转,非常炫酷。

 

  6、HTML5 Canvas绘制灰太狼 超级可爱

  HTML5 Canvas相当于一个画板,你可以在Canvas绘制任意东西,今天要分享一款利用HTML5 Canvas绘制的灰太狼形象,个人以为,这个灰太狼绘制得十分逼真形象,小伙伴们都要惊呆了。以后我们再来弄一个HTML5 Canvas的喜洋洋如何?

 

  7、HTML5动感的火焰燃烧动画特效

  这又是一款基于HTML5的超炫动画特效,是一款动感的火焰燃烧动画效果。这款HTML5动画火焰燃烧非常逼真,之前我们也分享过一些其他的HTML5火焰燃烧动画,比如:HTML5 Canvas火焰燃烧动画和纯CSS3实现打火机火焰动画。一般像这样的HTML5动画都是基于Canvas的,今天的这款也不例外。

 

   原文:

   原标题:7个华丽的基于Canvas的HTML5动画

   作者:码农网 – 小峰

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评