實例說明：

• 實例使用HTML5+CSS+JavaScript實現小球的運動效果
• 掌握Canvas的基本用法

技術要點：

• 從需求出發 分析Demo要實現的功能
• 擅於使用HTML5 Canvas 參考手冊

主要分為兩個部分：

1. 靜態布局：小球的設計，包括小球的位置、顏色、大小和大小變化情況等，初始化小球的函數，渲染函數，Update函數
2. 動態主體：變量、數組的的定義，小球顯示時長定時，鼠標移動觸發小球運動的函數

代碼部分：

canvas標簽，提供繪圖的畫布

js邏輯：靜態小球

其中，_init()函數設計小球的位置、顏色、速度、大小和大小變化，render()函數繪制小球,update()函數更小小球的變化

js邏輯：動態設計

var canvas = document.getElementById("canvas"); 獲取canvas元素

畫布的布局：

var ctx = canvas.getContext("2d"); 用於在畫布上繪圖的環境，返回的是環境對象，參數表示畫布上繪制的類型,"2d"表示二維繪圖。

移動鼠標，觸發小球顯示的時間限制：

綁定鼠標移動事件：

動態設計全部代碼：

效果圖：

註意：本實例用到一個JavaScript實用庫Underscore，提供了類似Prototype.js的一些功能,但是沒有繼承任何JavaScript內置對象。它彌補了部分jQuery沒有實現的功能,同時又是Backbone.js必不可少的部分。

HTML5 Canvas絢麗的小球詳解