三分钟HTML5画布(Canvas)动画教程


通常大部分Web程序员平时的工作只是开发一些常规的网站、信息化办公系统等。在他们的眼里,Web游戏动画开发程序员似乎神奇的多,Web游戏动画明显比普通的Web应用要灵活,...



           通常大部分Web程序员平时的工作只是开发一些常规的网站、信息化办公系统等。在他们的眼里,Web游戏动画开发程序员似乎神奇的多,Web游戏动画明显比普通的Web应用要灵活,更注重交互和视觉冲击,而动画动作、做图配色等方面更是外行。之前我也在一篇《未来web浏览技术提前体验:10个会让你惊叹不已的HTML5画布(canvas)技术应用演示》中向大家展示了Web动画的神奇魅力。


       但事实上,也许你想错了。Web动画并不难。你只需要掌握一些非常基本的知识就能开发出非常漂亮的Web动画。以前开发动画应用你可能需要学习很复杂的动画制作框架。自从HTML5画布(Canvas)功能面世后,Web动画就一下子从云端跌落到了地面——任何一个Web程序员都可以轻易的用画布(Canvas)技术+JavaScript来开发出各种动画效果。网上用来方便程序员开发画布(Canvas)游戏动画的JS工具包非常丰富,《盲打高手打飞字》这款练习盲打的游戏就是一个叫做impactjs的游戏引擎。而文下面的教程中将使用的是另外一个叫做kinetic的Web动画工具包。它们都是开源的。






观看演示
把鼠标放到上面的小丑脸上,然后移开,看看会发生效果。


这就是一个最简单的动画。简单吗?你能做出来吗?


下面我们就用三分钟时间,用很少的几行代码把这个动画做出来。你只需要了解很少的几个API,然后使用需要的动画参数,就能制作出这个有趣又能响应你的动作的Web动画。


第一步,画五官


这个小丑没有耳朵和眉毛,所以只剩下三官,但它的两个眼睛我们要分别绘制,所以一共是四个部分。下面先看看代码。


绘制左眼的代码

  1. var leftEye = new Kinetic.Line({

  2.         x: 150,

  3.         points: [0, 200, 50, 190, 100, 200, 50, 210],

  4.         tension: 0.5,

  5.         closed: true,

  6.         stroke: 'white',

  7.         strokeWidth: 10     

  8.       });

复制代码绘制右眼的代码

  1. var rightEye = new Kinetic.Line({

  2.         x: sw - 250,

  3.         points: [0, 200, 50, 190, 100, 200, 50, 210],

  4.         tension: 0.5,

  5.         closed: true,

  6.         stroke: 'white',

  7.         strokeWidth: 10   

  8.       });

复制代码绘制鼻子的代码

  1. var nose = new Kinetic.Line({

  2.         points: [240, 280, sw/2, 300, sw-240,280],

  3.         tension: 0.5,

  4.         closed: true,

  5.         stroke: 'white',

  6.         strokeWidth: 10

  7.       });

复制代码绘制嘴巴的代码

  1. var mouth = new Kinetic.Line({

  2.         points: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],

  3.         tension: 0.5,

  4.         closed: true,

  5.         stroke: 'red',

  6.         strokeWidth: 10

  7.       });

复制代码       你会不会觉得很失望,原来就这么简单几行代码。没错,就是这么简单,相信你对自己能成为一名Web游戏动画程序员开始有信心了!


       简单讲解一下上面的代码。Kinetic就是我们使用的js工具包。在页面的头部,我们需要这样引用它:

  1. <script type="text/javascript"

  2. src="/js/kinetic-v5.0.1.min.js?0d64e4"></script>

标签: html5

更多 html5 相关资讯

简单做出HTML5翻页效果文字特效

之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页。于是我兴致勃勃的点开源码看了一下,发现其实实现也挺简单的,主

18个HTML5和JavaScript游戏引擎库

18个HTML5和JavaScript游戏引擎库

1) Best HTML5 and javascript game engine Library- Impactjs 2) Best HTML5 and javascript game engine Library - Craftyjs 3) Best HTML5 and javascript game engi

7款HTML5精美应用教程 让你立即爱上HTML5

7款HTML5精美应用教程 让你立即爱上HTML5

你喜欢HTML5吗?我想下面的这7个HTML5应用一定会让你爱上HTML5的,不信就一起来看看吧。1、HTML5/jQuery雷达动画图表 图表配置十分简单之前我们介绍过不少形形色色的HTML5图表

HTML5体验改进的14条军规

来自公园《HTML5——用新方式创造更好的用户体验》线下活动中来自火速轻应用的技术总监胡敏东的分享。 1. fake 页 - 首屏加速目标:首屏 3s 以内 因为 71% 的用户期望移动页

将HTML5封装成android应用APK文件的几种方法

越来越多的开发者热衷于使用html5+JavaScript开发移动Web App。不过,HTML5 Web APP的出现能否在未来取代移动应用,就目前来说,还是个未知数。一方面,用户在使用习惯上,不喜欢在浏

HTML5里的placeholder属性

HTML5里的placeholder属性

HTML5里新引入很多有趣的新特征;有些体现在HTML里,有些是JavaScript API,全部非常的有用。其中我最喜欢的一个特征就是文本框(INPUT)里的placeholder属性。placeholder

7种炫酷HTML5 SVG液态水滴融合动画特效

7种炫酷HTML5 SVG液态水滴融合动画特效

这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合动画特效。这些SVG动画特效使一些HTML元素,如菜单、分页按钮、APP、选择框等元素的过渡动画像几粒水滴一样融合分解,效果

绘制SVG内容到Canvas的HTML5应用

绘制SVG内容到Canvas的HTML5应用

SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接绘制在Canvas上的功能,使得两者可以完美的融

PHP结合HTML5使用FormData对象提交表单及上传图片

PHP结合HTML5使用FormData对象提交表单及上传图片

FormData 对象,可以把form中所有表单元素的name与value组成一个queryString,提交到后台。在使用Ajax提交时,使用FormData对象可以减少拼接queryString的工作量。 使用Form

HTML5应用程序缓存Application Cache详解

HTML5应用程序缓存Application Cache详解

什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用。 Applic