在开发动画应用之前，你可能需要学习一个非常复杂的动画框架。自从HTML5的Canvas功能出现后，网页动画一下子从云端掉到了地上？？任何一个Web程序员都可以用Canvas技术+JavaScript轻松开发出各种动画效果。
另一个名为kinetic的网络动画工具包将在下面的教程中使用。都是开源的。
我们需要了解Canvas中的几个API，然后使用需要的动画参数来制作这个有趣且响应性强的Web动画。把鼠标放在上面小丑的脸上，然后把它移开，看看会发生什么。
基本结构
KineticJS首先绑定到HTML页面上的一个DOM容器元素，比如最常用的< div >标记。浏览器最终展现的是这些用户层的叠加效果。
绘图界面
现在我们开始用动力学来制作我们的图片。
运动绘图的基本过程如下图所示:
第一步是创建一个HTML5页面，并添加一个对Kinetic库的引用:
添加一个绑定到Kinetic的容器来创建一个stage，例如，它可以是一个< div >:
加载页面时绘制。
window.onload = function() { // 定义全局变量 var sw = 578; var sh = 400; //创建Kinetic舞台，绑定我们添加的容器 var stage = new Kinetic.Stage({ container : “container”, //
Id宽度为:578，//创建的舞台宽度高度:400 //创建的舞台高度})；//创建动态用户层var layer = new Kinetic。layer()；}
画左眼和右眼
首先，我们需要创建一个运动对象，调用Line()方法进行绘制。
使用kinetic Toolkit中的方法绘制左眼和右眼。
// 创建一个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});左眼和右眼动画
要让小丑的左右眼动起来，就要对事件进行监控，在两个事件的指针在元素上，鼠标在元素外的时候进行动画操作。
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/.