[HTML5资料]Canvas教程

《[HTML5资料]Canvas教程》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、HTML5资料01Canvas教程是一个新的用于通过脚本（通常是JavaScript）绘图的HTML元素。例如，他可以用于绘图、制作图片的组合或者简单的动画（当然并不那么简单）。Itcanforinstancebeusedtodrawgraphs,makephotocompositionsordosimple(andnotsosimple)animations.1.1基本用法Basicusage 元素Let'sstartthistutorialbylookingattheelementitself. 让我们从

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

3、lsobesetusingDOMpropertiesorCSSrules.它只有两个属性，width和height，两个都是可选的，并且都可以DOM或者CSS来设置。Whennowidthandheightattributesarespecified,thecanvaswillinitiallybe300pixelswideand150pixelshigh.如果不指定width和height，默认的是宽300像素，高150像素。TheelementcanbesizedarbitrarilybyCSS,butduringrenderingtheimageis

4、scaledtofititslayoutsize.  (Ifyour renderingsseemdistorted,tryspecifyingyourwidthandheightattributesexplicitlyintheattributes,andnotwithCSS.)虽然可以通过CSS来调整canvas的大小，但渲染图像会缩放来适应布局的（如果你发现渲染结果看上去变形了，不必一味依赖CSS，可以尝试显式指定canvas的width和height属性值）。Theidattributeisn'tspecifictothe

5、as>elementbutisoneofdefaultHTMLattributeswhichcanbeappliedto(almost)everyHTMLelement(likeclassforinstance).It'salwaysagoodideatosupplyanidbecausethismakesitmucheasiertoidentifyitinourscript.id 属性不是专享的，就像标准的HTLM标签一样，任何一个HTML元素都可以指定其id值。一般，为元素指定id是个不错的主意，这样使得在脚本中应用更加方便。The

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

7、等）。然而这些样式并不会对canvas实际生成的图像产生什么影响。下面我们会看到如何应用样式。如果不指定样式，canvas默认是全透明的。替用内容Becausetheelementisstillrelativelynewandisn'timplementedinsomebrowsers(suchasFirefox1.0andInternetExplorer),weneedameansofprovidingfallbackcontentwhenabrowserdoesn'tsupporttheelement.因为相对较新，有些

8、浏览器并没实现，如Firefox1.0和InternetExplo