《火龍果軟件-[html5資料]canvas教程》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫。

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

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

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

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

5、ttributeisn'tspecifictotheelementbutisoneofdefaultHTMLattributeswhichcanbeappliedto(almost)everyHTMLelement(likeclassforinstance).It'salwaysagoodideatosupplyanidbecausethismakesitmucheasiertoidentifyitinourscript.id?屬性不是專享的，就像標準的HTLM標簽一樣，任何一個HTML元素都可以指定其id值

6、。一般，為元素指定id是個不錯的主意，這樣使得在腳本中應用更加方便。Theelementcanbestyledjustlikeanynormalimage(margin,border,background,etc).Theseruleshoweverdon'taffecttheactualdrawingonthecanvas.We'llseehowthisisdonelaterinthistutorial.Whennostylingrulesareappliedtothecanvasitwillinitiallybefull

7、ytransparent.元素可以像普通圖片一樣指定其樣式（邊距，邊框，背景等等）。然而這些樣式并不會對canvas實際生成的圖像產(chǎn)生什么影響。下面我們會看到如何應用樣式。如果不指定樣式，canvas默認是全透明的。替用內(nèi)容Becausetheelementisstillrelativelynewandisn'timplementedinsomebrowsers(suchasFirefox1.0andInternetExplorer),weneedameansofprovidingfallbackconten

8、twhenabrowserdoesn'tsupporttheelement.因為相對較新，有些瀏覽器并沒實現(xiàn)，如Firefox1.0和InternetExplor