整理HTML5的一些新特性與Canvas的常用屬性

1.HTML5的內容類型

內容類型	描述
內嵌	向文檔中添加其他類型的內容，例如audio、video、canvas和iframe等
流	在文檔和應用的body中使用的元素，例如form、h1和small
標題	段落標題，例如h1、h2和hgroup等
交互	與用戶交互的內容，例如音頻和視頻的控件、botton和textarea等
元數據	通常出現在頁面的head中，設置頁面其他部分的表現和行為，例如script、style和title等。
短語	文本和文本標記元素，例如mark、kdb、sub和sup等
片段	用友定義頁面片段的元素，例如article、aside和title等

2.HTML5中新的片段類元素

元素名	描述
header	標記頭部區域的內容（用于整個頁面或頁面中的一塊區域）
footer	標記腳部區域的內容（用于整個頁面或頁面中的一塊區域）
section	Web頁面中的一塊區域
article	獨立的文章內容
aside	相關內容或者引文
nav	導航類輔助內容

3.新querySelector方法

提示
selectors API不僅僅只是方便，在遍歷DOM的時候，selectors API通常會比以前的子節點搜索API更快。為了實現快速樣式表，瀏覽器對選擇器匹配進行了高度優化。

4.Canvas API
4.1Canvas 概述
Canvas本質上是一個位圖畫布，其上繪制的圖形是不可縮放的，不能像SVG圖像那樣可以被放大縮小。此外，用Canvas繪制出來的對象不屬于頁面DOM結構或者任何命名空間。
使用canvas編程，首先要獲取其上下文（context）。接著在上下文中執行動作，最后將這些動作應用到上下文中。
canvas中的坐標是從左上角開始的，x軸沿著水平方向（按像素）向右延伸，y軸沿垂直方向向下延伸。左上角坐標為x=0,y-0的點稱作原點。
同大多數HTML元素一樣，canvas元素也可以通過應用CSS的方式來增加邊框，設置內邊距、外邊距等，而且一些CSS屬性還可以被canvas內的元素繼承。
4.2 使用HTML5 Canvas API
修正——在繪制系統中的說法是變換——在應用的時候可以被順序應用、組合或者隨意修改。每個繪制操作的結果顯示在canvas上之前都要經過修正層去做修正。雖然這么做增加了額外的復雜性，但卻為繪制系統添加了更為強大的功能，可能像目前主流圖像編輯工具那樣支持實時圖像處理，所以API中這部分內容的復雜性是必要的。
關于可重用代碼有一條重要的建議：一般繪制都應從原點（坐標系的0,0點）開始，應用變換（縮放、平移、旋轉等），然后不斷修改代碼直至達到希望的效果。
context路徑函數
（1）moveTo(x,y)：不繪制，只是將當前位置移動到新的目的坐標(x,y);
（2）lineTo(x,y)：不僅將當前位置移動到新的目標坐標（x,y），而且在兩個坐標之間畫一條直線。
（3）closePath()：這個函數的行為同lineTo很像，唯一的差別在于closePaht會將路徑的起始坐標自動作為目標坐標。closePath還會通知canvas當前繪制的圖形已經閉合或者形成了完全封閉的區域，這對將來的填充和描邊都非常有用。
（4）strokeRect()：基于給出的位置和坐標畫出矩形的輪廓。
（5）clearRect()：清除矩形區域內所有內容并將它恢復到初始狀態，即透明色。
（6）quadraticCurveTo()：函數繪制曲線的起點是當前坐標，帶有兩組(x,y)邊。第二組是指曲線的終點。第一組代表控制點（control point）。所謂的控制點位于曲線的旁邊（不是曲線之上），其作用相當于對曲線產生一個拉力。通過調整控制點的位置，就可以改變曲線的曲率。
圖片增加了canvas操作的復雜度：必須等到圖片完全加載后才能對其進行操作。瀏覽器通常會在頁面腳本執行的同時異步加載圖片。如果視圖在圖片未完全加載之前就將其呈現到canvas上，那么canvas將不會顯示任何圖片。
漸變是指在顏色集上使用逐步抽樣算法，并將結果應用于描邊樣式和填充樣式中。
使用漸變需要三個步驟：
（1）創建漸變對象；
（2）為漸變對象設置顏色，指明過渡方式；
（3）在context上為填充樣式或者描邊樣式設置漸變。
要設置顯示哪種顏色，在漸變對象上使用addColorStop函數即可。這個函數允許指定兩個參數：顏色和偏移量。顏色參數是指開發人員希望在偏移位置描邊或填充時所使用的顏色。偏移量是一個0.0到1.0之間的數值，代表沿著漸變線漸變的距離有多遠。
除了線性漸變以外，HTML5 Canvas API 還支持放射性漸變，所謂放射性漸變就是顏色會介于兩個指定圓間的錐形區域平滑變化。放射性漸變和線性漸變使用的顏色終止點是一樣的。