HTML5屬性的介紹和擴展

HTML5

視頻

HTML5 規定了一種通過 video 元素來包含視頻的標準方法。

如需在 HTML5 中顯示視頻，您所有需要的是：

音頻

Canvas

一 簡單圖形整套的屬性和方法專門用于繪制矩形：

1、fillStyle可以設置為CSS顏色、一個圖案或一種顏色漸變。fillStyle默認是純黑色，你可以設置成你喜歡的任意顏色。只要頁面打開著，每個繪圖上下文都會記錄自己的屬性，除非你重置過它。

2、fillRect(x,y,width,height)繪制一個矩形，并以當前的fillStyle來填充。

3、srtokeStyle和fillStyle一樣，可以設置為CSS顏色、一個圖案或一種顏色漸變。

4、strokeRect(x,y,width,height)使用當前的storke style來繪制一個矩形，strokeRect并不填充中間區域，而只繪制矩形的邊緣。

5、clearRect(x,y,width,height)清除指定矩形區域的像素。

按照慣例，不論開始繪制何種圖形，第一個需要調用的就是beginPath。這個簡單的函數不帶任何參數，它用來通知canvas將要開始繪制一個新的圖形了。對于canvas來說，beginPath函數最大的用處是canvas需要據此來計算圖形的內部和外部的范圍，以便完成后續的描邊和填充。

路徑會跟蹤當前坐標，默認值是原點。canvas本身也跟蹤當前坐標，不過可能通過繪制代碼來修改。

每一個canvas都有一個路徑，定義路徑就如同用鉛筆作畫。你可以任意作地畫，但它不一定是最終作品的一部分，直到你拿起畫筆沾上墨水描繪這條路徑。

moveTo(x,y)：不繪制，只是將當前位置移動到新目標坐標(x,y)，并作為線條開始點。

lineTo(x,y)：繪制線條到指定的目標坐標(x,y)，并且在兩個坐標之間畫一條直線。不管調用它們哪一個，都不會真正畫出圖形，因為我們還沒有主，調用stroke(繪制)和fil(填充)函數。當前，只是在定義路徑的位置，以便后面繪制時使用。

closePath()，這個函數跟lineTo很像，唯一的差別在于closePath會將路徑的起始坐標自動作為目標坐標。closePath還會通知canvas當前繪制的圖形已經閉合或者形成了完全封閉的區域。起連接起點，閉合路徑的作用。

操作canvas文本的方式與操作其他路徑對象的方式相同：可以描繪文本輪廓和填充文本內部，同時，所有能夠應用于其他圖形的變換和樣式都能用于文本。context對象的文本繪制功能由兩個函數組成：

fillText(text,x,y,maxwidth)

trokeText(text,x,y,maxwidth)

兩個的參數完全相同，必選參數包括文本參數以及用于指定文本位置的坐標參數。maxwidth是可選參數，用于限制字體大小，它會將文本字體強制收縮到指定尺寸。此外，還有一個measureText函數可供使用，該函數會返回一個度量對象，其包含了在當前context環境下指定文本的實際顯示寬度。

為了保證文本在各瀏覽器下都能正常顯示，在繪制上下文里有以下字體屬性

1、font可以是CSS字體規則中的任何值。包括：字體樣式、字體變種、字體大小與粗細、行高和字體名稱。

2、textAlign控制文本的對齊方式。它類似于(但不完全相同)CSS中的text-align?？赡艿娜≈禐?#xff1a;start,end,left,right,和center.

3、textBaseline控制文本相對于起點的位置?？梢匀≈涤衪op,hanging,middle,alphabetic,ideographic和bottom。對于簡單的英文字母，可以放心的使用top,middle或bottom作為文本基線。

一旦我們擁有了繪圖上下文，就可以開始定義一個顏色漸變。漸變是兩種或更多顏色的平滑過度。canvas的繪圖上下文支持兩種類型的漸變：

1、createLinearGradient(x0,y0,x1,x1)沿著直線從(x0,y0)至(x1,y1)繪制漸變。

2、createRadialGradient(x0,y0,r0,x1,y1,r1)沿著兩個圓之間的錐面繪制漸變。前三個參數代表開始的圓，圓心為(x0,y0)，半徑為r0。最后三個參數代表結束的圓，圓心為(x1,y1)，半徑為r1。

canvas的繪圖上下文中定義了幾種繪制圖片的方法：

1、drawIamge(image,dx,dy)接受一個圖片，并將之畫到canvaa中。給出的坐標(dx,dy)代表圖片的左上角。比如，坐標(0，0)將把圖片畫到canvas的左上

總結

以上是生活随笔為你收集整理的html5 扩展属性,HTML5属性的介绍和扩展.doc的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。