文档介绍:薇HTML5资料蒆Canvas教程节<canvas>是一个新的用于通过脚本(通常是JavaScript)绘图的HTML元素。例如,他可以用于绘图、制作图片的组合或者简单的动画(当然并不那么简单)。Itcanforinstancebeusedtodrawgraphs,positionsordosimple(andnotsosimple) <canvas>元素罿Let'sstartthistutorialbylookingatthe<canvas>elementitself. 螇让我们从<canvas>元素的定义开始吧。肄蒂<canvasid="tutorial"width="150"height="150"></canvas>莀Thislooksalotlikethe<img>element,theonlydifferenceisthatitdoesn'thavethesrcandaltattributes.<canvas>看起来很像<img>,唯一不同就是它不含src和alt属性。葿The<canvas>elementhasonlytwoattributes-,width和height,两个都是可选的,并且都可以DOM或者CSS来设置。Whennowidthandheightattributesarespecified,,默认的是宽300像素,高150像素。螃TheelementcanbesizedarbitrarilybyCSS,butduringrenderingtheimageisscaledtofititslayoutsize.  (Ifyour renderingsseemdistorted,tryspecifyingyourwidthandheightattributesexplicitlyinthe<canvas>attributes,andnotwithCSS.)虽然可以通过CSS来调整canvas的大小,但渲染图像会缩放来适应布局的(如果你发现渲染结果看上去变形了,不必一味依赖CSS,可以尝试显式指定canvas的width和height属性值)。薂螁Theidattributeisn'tspecifictothe<canvas>elementbutisoneofdefaultHTMLattributeswhichcanbeappliedto(almost)everyHTMLelement(likeclassforinstance).It' 属性不是<canvas>专享的,就像标准的HTLM标签一样,任何一个HTML元素都可以指定其id值。一般,为元素指定id是个不错的主意,这样使得在脚本中应用更加方便。袅蚂The<canvas>elementcanbestyledjustlikeanynormalimage(margin,border,background,etc).Theseruleshoweverdon''.<canvas>元素可以像普通图片一样指定其样式(边距,边框,背景等等)。然而这些样式并不会对canvas实际生成的图像产生什么影响。下面我们会看到如何应用样式。如果不指定样式,canvas默认是全透明的。羇蚈替用内容薄Becausethe<canvas>elementisstillrelativelynewandisn'timplementedinsomebrowsers(),weneedameansofprovidingfallbackcontentwhenabrowserdoesn'<canvas>相对较新,有些浏览器并没实现,,所以我们需要为那些不支