HTML5屬性的介紹和擴(kuò)展

HTML5

視頻

HTML5 規(guī)定了一種通過(guò) video 元素來(lái)包含視頻的標(biāo)準(zhǔn)方法。

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

音頻

Canvas

一 簡(jiǎn)單圖形整套的屬性和方法專(zhuān)門(mén)用于繪制矩形：

1、fillStyle可以設(shè)置為CSS顏色、一個(gè)圖案或一種顏色漸變。fillStyle默認(rèn)是純黑色，你可以設(shè)置成你喜歡的任意顏色。只要頁(yè)面打開(kāi)著，每個(gè)繪圖上下文都會(huì)記錄自己的屬性，除非你重置過(guò)它。

2、fillRect(x,y,width,height)繪制一個(gè)矩形，并以當(dāng)前的fillStyle來(lái)填充。

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

4、strokeRect(x,y,width,height)使用當(dāng)前的storke style來(lái)繪制一個(gè)矩形，strokeRect并不填充中間區(qū)域，而只繪制矩形的邊緣。

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

按照慣例，不論開(kāi)始繪制何種圖形，第一個(gè)需要調(diào)用的就是beginPath。這個(gè)簡(jiǎn)單的函數(shù)不帶任何參數(shù)，它用來(lái)通知canvas將要開(kāi)始繪制一個(gè)新的圖形了。對(duì)于canvas來(lái)說(shuō)，beginPath函數(shù)最大的用處是canvas需要據(jù)此來(lái)計(jì)算圖形的內(nèi)部和外部的范圍，以便完成后續(xù)的描邊和填充。

路徑會(huì)跟蹤當(dāng)前坐標(biāo)，默認(rèn)值是原點(diǎn)。canvas本身也跟蹤當(dāng)前坐標(biāo)，不過(guò)可能通過(guò)繪制代碼來(lái)修改。

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

moveTo(x,y)：不繪制，只是將當(dāng)前位置移動(dòng)到新目標(biāo)坐標(biāo)(x,y)，并作為線(xiàn)條開(kāi)始點(diǎn)。

lineTo(x,y)：繪制線(xiàn)條到指定的目標(biāo)坐標(biāo)(x,y)，并且在兩個(gè)坐標(biāo)之間畫(huà)一條直線(xiàn)。不管調(diào)用它們哪一個(gè)，都不會(huì)真正畫(huà)出圖形，因?yàn)槲覀冞€沒(méi)有主，調(diào)用stroke(繪制)和fil(填充)函數(shù)。當(dāng)前，只是在定義路徑的位置，以便后面繪制時(shí)使用。

closePath()，這個(gè)函數(shù)跟lineTo很像，唯一的差別在于closePath會(huì)將路徑的起始坐標(biāo)自動(dòng)作為目標(biāo)坐標(biāo)。closePath還會(huì)通知canvas當(dāng)前繪制的圖形已經(jīng)閉合或者形成了完全封閉的區(qū)域。起連接起點(diǎn)，閉合路徑的作用。

操作canvas文本的方式與操作其他路徑對(duì)象的方式相同：可以描繪文本輪廓和填充文本內(nèi)部，同時(shí)，所有能夠應(yīng)用于其他圖形的變換和樣式都能用于文本。context對(duì)象的文本繪制功能由兩個(gè)函數(shù)組成：

fillText(text,x,y,maxwidth)

trokeText(text,x,y,maxwidth)

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

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

1、font可以是CSS字體規(guī)則中的任何值。包括：字體樣式、字體變種、字體大小與粗細(xì)、行高和字體名稱(chēng)。

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

3、textBaseline控制文本相對(duì)于起點(diǎn)的位置。可以取值有top,hanging,middle,alphabetic,ideographic和bottom。對(duì)于簡(jiǎn)單的英文字母，可以放心的使用top,middle或bottom作為文本基線(xiàn)。

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

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

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

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

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。