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

這篇文章主要介紹了HTML5的一些新特性與Canvas的常用屬性的整理,Canvas API是HTML5中用於繪製圖形的重要內容,需要的朋友可以參考下1.HTML5的內容類型

提示

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

Canvas本質上是一個位圖畫布，其上繪製的圖形是不可縮放的，不能像SVG圖像那樣可以被放大縮小。此外，用Canvas繪製出來的對像不屬於頁面DOM結構或者任何命名空間。

使用canvas編程，首先要獲取其上下文（context）。接著在上下文中執行動作，最後將這些動作應用到上下文中。

canvas中的坐標是從左上角開始的，x軸沿著水平方向（按像素）向右延伸，y軸沿垂直方向向下延伸。左上角坐標為x=0,y-0的點稱作原點。

同大多數HTML元素一樣，canvas元素也可以通過應用CSS的方式來增加邊框，設置內邊距、外邊距等，而且一些CSS屬性還可以被canvas內的元素繼承。

修正-在繪製系統中的說法是變換-在應用的時候可以被順序應用、組合或者隨意修改。每個繪製操作的結果顯示在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 還支持放射性漸變，所謂放射性漸變就是顏色會介於兩個指定圓間的錐形區域平滑變化。放射性漸變和線性漸變使用的顏色終止點是一樣的。