html5 canvas 与小丑。

介绍

　　之前开发动画应用你可能须要学习很复杂的动画制做框架。自从HTML5画布(Canvas)功能面世后，Web动画就一会儿从云端跌落到了地面——任何一个Web程序员均可以轻易的用画布(Canvas)技术+JavaScript来开发出各类动画效果。

　　而文下面的教程中将使用的是另一个叫作kinetic的Web动画工具包。它们都是开源的。

　　咱们须要了解Canvas中的几个API，而后使用须要的动画参数，就能制做出这个有趣又能响应你的动做的Web动画。把鼠标放到上面的小丑脸上，而后移开，看看会发生效果。

基本结构

KineticJS首先是要绑定到HTML页面上的一个DOM容器元素上，好比最经常使用的< div >标签。浏览器最终显示的就是这些用户层的叠加效果。

绘制界面

如今咱们开始用Kinetic制做咱们的画面。

Kinetic绘图的基本的流程能够以下图所示：

首先是建立一个HTML5页面，在里添加对Kinetic库的引用：

<script type="text/javascript" src="kinetic-v5.1.0.min.js"></script>

在中添加一个用于绑定到Kinetic用于建立舞台的容器，好比说能够是个 < div >：

<div id="“container”"></div>

在页面加载时进行绘图

window.onload = function() {
    // 定义全局变量
    var sw = 578;
    var sh = 400;
 
    //建立Kinetic舞台，绑定咱们添加的<div>容器
    var stage = new Kinetic.Stage({
 
        container : “container”, //<div>的id
 
        width : 578, //建立的舞台宽度
 
        height : 400 //建立的舞台高度
    });
 
    //建立Kinetic用户层
    var layer = new Kinetic.Layer();
}
</div></div>

绘制左眼、右眼

首先咱们须要先建立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/