介绍 以前开发动画应用你可能需要学习很复杂的动画制作框架。自从html5画布(canvas)功能面世后，web动画就一下子从云端跌落到了地面任何一个web程序员都可以轻易的用画布(canvas)技术+javascript来开发出各种动画效果。
而文下面的教程中将使用的是另外一个叫做kinetic的web动画工具包。它们都是开源的。
我们需要了解canvas中的几个api，然后使用需要的动画参数，就能制作出这个有趣又能响应你的动作的web动画。把鼠标放到上面的小丑脸上，然后移开，看看会发生效果。
基本结构 kineticjs首先是要绑定到html页面上的一个dom容器元素上，比如最常用的标签。浏览器最终显示的就是这些用户层的叠加效果。
绘制界面 现在我们开始用kinetic制作我们的画面。
kinetic绘图的基本的流程可以如下图所示：
首先是创建一个html5页面，在里添加对kinetic库的引用：

在中添加一个用于绑定到kinetic用于创建舞台的容器，比如说可以是个 ：

在页面加载时进行绘图 window.onload = function() { // 定义全局变量 var sw = 578; var sh = 400; //创建kinetic舞台，绑定我们添加的容器 var stage = new kinetic.stage({ container : “container”, //的id width : 578, //创建的舞台宽度 height : 400 //创建的舞台高度 }); //创建kinetic用户层 var layer = new kinetic.layer();}

绘制左眼、右眼 首先我们需要先创建kinetic对象，并调用line()方法，进行绘制。
使用kinetic工具包中的方法，绘制左右眼
// 创建一个kinetic线形对象var lefteye = new kinetic.line({ x: 150, // x轴位置 points: [0, 200, 50, 190, 100, 200, 50, 210], // 位置点 tension: 0.5, // 线条弹性 closed: true, stroke: 'white', // 线条颜色 strokewidth: 10 // 线条宽度});
// 创建一个kinetic线形对象var righteye = new kinetic.line({ x: sw - 250, points: [0, 200, 50, 190, 100, 200, 50, 210], tension: 0.5, closed: true, stroke: 'white', strokewidth: 10 });// 向用户层中添加上面的线形layer.add(lefteye).add(righteye);// 将上面的用户层添加到舞台上stage.add(layer);
绘制鼻子和嘴巴 绘制鼻子和嘴巴
var nose = new kinetic.line({ points: [240, 280, sw/2, 300, sw-240,280], tension: 0.5, closed: true, stroke: 'white', strokewidth: 10});var mouth = new kinetic.line({ points: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh], tension: 0.5, closed: true, stroke: 'red', strokewidth: 10});
左右眼动画 让小丑的左右眼能够动起来，需要监听事件，用到两事件指针位于元素上方时（mouseover），鼠标从元素上移开时（mouseout）,执行动画操作。
var lefteyetween = new kinetic.tween({ node: lefteye, duration: 1, easing: kinetic.easings.elasticeaseout, y: -100, points: [0, 200, 50, 150, 100, 200, 50, 200]});
var righteyetween = new kinetic.tween({ node: righteye, duration: 1, easing: kinetic.easings.elasticeaseout, y: -100, points: [0, 200, 50, 150, 100, 200, 50, 200]});
鼻子和嘴巴动画 var nosetween = new kinetic.tween({ node: nose, duration: 1, easing: kinetic.easings.elasticeaseout, y: -100, points: [220, 280, sw/2, 200, sw-220,280]});
var mouthtween = new kinetic.tween({ node: mouth, duration: 1, easing: kinetic.easings.elasticeaseout, points: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]
更多内容如时钟效果、 图像缩放和裁剪、canvas简单实用的图表 - chart.js
请参见：http://hubwiz.com/course/55adf42f3ad79a1b05dcbff0/