html 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/