[HTML5資料]Canvas教程

《[HTML5資料]Canvas教程》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在學(xué)術(shù)論文-天天文庫。

1、HTML5資料01Canvas教程是一個(gè)新的用于通過腳本（通常是JavaScript）繪圖的HTML元素。例如，他可以用于繪圖、制作圖片的組合或者簡(jiǎn)單的動(dòng)畫（當(dāng)然并不那么簡(jiǎn)單）。Itcanforinstancebeusedtodrawgraphs,makephotocompositionsordosimple(andnotsosimple)animations.1.1基本用法Basicusage?元素Let'sstartthistutorialbylookingattheelementitself.?讓我們從

2、元素的定義開始吧。Thislooksalotliketheelement,theonlydifferenceisthatitdoesn'thavethesrcandaltattributes.看起來很像，唯一不同就是它不含src和alt屬性。Theelementhasonlytwoattributes-widthandheight.Thesearebothoptionalandcana

3、lsobesetusingDOMpropertiesorCSSrules.它只有兩個(gè)屬性，width和height，兩個(gè)都是可選的，并且都可以DOM或者CSS來設(shè)置。Whennowidthandheightattributesarespecified,thecanvaswillinitiallybe300pixelswideand150pixelshigh.如果不指定width和height，默認(rèn)的是寬300像素，高150像素。TheelementcanbesizedarbitrarilybyCSS,butduringrenderingtheimageis

4、scaledtofititslayoutsize.??(Ifyour?renderingsseemdistorted,tryspecifyingyourwidthandheightattributesexplicitlyintheattributes,andnotwithCSS.)雖然可以通過CSS來調(diào)整canvas的大小，但渲染圖像會(huì)縮放來適應(yīng)布局的（如果你發(fā)現(xiàn)渲染結(jié)果看上去變形了，不必一味依賴CSS，可以嘗試顯式指定canvas的width和height屬性值）。Theidattributeisn'tspecifictothe

5、as>elementbutisoneofdefaultHTMLattributeswhichcanbeappliedto(almost)everyHTMLelement(likeclassforinstance).It'salwaysagoodideatosupplyanidbecausethismakesitmucheasiertoidentifyitinourscript.id?屬性不是專享的，就像標(biāo)準(zhǔn)的HTLM標(biāo)簽一樣，任何一個(gè)HTML元素都可以指定其id值。一般，為元素指定id是個(gè)不錯(cuò)的主意，這樣使得在腳本中應(yīng)用更加方便。The

6、anvas>elementcanbestyledjustlikeanynormalimage(margin,border,background,etc).Theseruleshoweverdon'taffecttheactualdrawingonthecanvas.We'llseehowthisisdonelaterinthistutorial.Whennostylingrulesareappliedtothecanvasitwillinitiallybefullytransparent.元素可以像普通圖片一樣指定其樣式（邊距，邊框，背景等

7、等）。然而這些樣式并不會(huì)對(duì)canvas實(shí)際生成的圖像產(chǎn)生什么影響。下面我們會(huì)看到如何應(yīng)用樣式。如果不指定樣式，canvas默認(rèn)是全透明的。替用內(nèi)容Becausetheelementisstillrelativelynewandisn'timplementedinsomebrowsers(suchasFirefox1.0andInternetExplorer),weneedameansofprovidingfallbackcontentwhenabrowserdoesn'tsupporttheelement.因?yàn)?canvas>相對(duì)較新，有些

8、瀏覽器并沒實(shí)現(xiàn)，如Firefox1.0和InternetExplo