自己在“上海某985大學”待了五年，有蠻多的不舍。但是終究還是要離開。下面對這幾年HTML5的使用做一個總結。總結是一種技術的沉淀。
HTML5大家現在很火，它的標准已經出來。在標准還沒有成型的時候，相信我們都已經開始使用HTML5的圖表和研究HTML5的游戲引擎了。HTML5跨平台和輕量級，這是本人最喜歡的一點。
雖然期間也考慮過Mono.
大二（2009年）就開始使用HTML4.0,哪個時候為“頁面動畫效果、瀏覽器的兼容性、分辨率的設置”吐了多少血。現在使用HTML5，有一種撥開烏雲見明月的趕腳。雖然期間也是用過Silverlight，
但是還是HTML5的表現更加給力。但Webkit瀏覽器和Mozilla瀏覽器有些CSS屬性還是要單獨定義。
H5的API比H4主要有一下一些特性：Canvas、CSS3、SVG、Vidio&Audio、拖放功能、脫機Web應用程序、WebSocket、WebWorkers、本地數據存儲、Geolocation。下面我們分別介紹下每個功能的特性。
一、Canvas
顧名思義它是一個面板。面板我們都知道，我們可以在上面畫我們想要的任何東西。“任何東西”，則說明它是一個可以編程的容器。我們以前只能使用HTML的各種標簽，使用圖片，結合JS實現。
現在Canvas可以充當PS圖層一樣的面板，讓我們塗鴉。那個感覺當然爽。
操作Canvas的主要JS方法和屬性有：
（1）Context:上下文。Canvas就行繪畫的通知，Context就相當於繪畫用的畫筆。getContext("2d");
(2)設置顏色：fillStyle/fillRect
(3)路徑繪制圖形：
a、獲取Context.b、調用BeginPath、使用moveTo()、lineTo方法指定坐標和繪制直線、closePath()結束路徑。不論話什么形狀都可以。當然要有耐心。當然一些規則的圖形，像圓弧、矩形、
橢圓都是可以直接調用函數進行繪制的。
（4）顏色設置。
strokeStyle：描繪輪廓線、fillStyle：填充輪廓線。
（5）漸變設置。（CSS3也可以設置漸變，原來只能使用圖片）
線性漸變：createLinearGradient，圓形漸變：createRadialGradient
（6）圖像處理。
Canvas表現的是位圖，如果縮放會造成失真。Svg是矢量圖。但由於Canvas是位圖，所以它可以把圖像按像素處理。getImageData()獲取Canvas的像素數據，然后加工，putImageData()重新繪制到
Canvas。
(7)繪制圖表。
我們使用過大量的圖表，像HighCharts、ECharts、FusionChats（記得原來是Flash）。但是這些圖表都是用svg來做的，當然Canvas也可以做，但是無有縮放效果。
a、繪制背景。b、繪制X軸和Y軸。c、繪制X軸和Y軸分割線。d、計算數據點的坐標。e、繪制折線和矩形。
(8)旋轉和變形。
scale()：縮放。translate()：移動。rotate():旋轉。矩陣變換:setTramsform。
（9）繪制文本。
fillText:描繪文本。strokeText：描繪文件輪廓。
（10）動畫效果。
CSS3可以直接定義動畫效果。但是Canvas中的動畫，必須用JS+Canvas元素來做。
二、CSS3
最新的CSS3的主要特性就是“文本和圖像”的特效。比如陰影、半透明、旋轉、動畫等。
（1）陰影
-webkit-box-shadow和-moz-box-shadow
（2）顏色設置
"#FFFFFF"、rgb（）、rgba()、hsl()、hsla（）
（3）變形
-webkit-transform、-moz-transtorm
（4）動畫
CSS3定義動畫和Flash定義動畫類似，都是設置關鍵幀。然后將定義好的關鍵幀，設置給某些HTML5元素的樣式就可以了。
（5）特效
圓角（-webkit-border-radius和）、漸變（gradient）、倒影（-webkit-box-relect）