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/