HTML5资料Canvas教程.docx
《HTML5资料Canvas教程.docx》由会员分享，可在线阅读，更多相关《HTML5资料Canvas教程.docx（90页珍藏版）》请在冰点文库上搜索。
HTML5资料Canvas教程
HTML5资料
1Canvas教程
例如，他可以用于绘图、制作图片的组合或者简单的动画（当然并不那么简单）。
Itcanforinstancebeusedtodrawgraphs,makephotocompositionsordosimple（andnotsosimple）animations.
1.1基本用法
Basicusage
Let'sstartthistutorialbylookingatthe
让我们从
Thislooksalotlikethe![]()
element,theonlydifferenceisthatitdoesn'thavethesrcandaltattributes.
The
Whennowidthandheightattributesarespecified,thecanvaswillinitiallybe300pixelswideand150pixelshigh.如果不指定width和height，默认的是宽300像素，高150像素。
TheelementcanbesizedarbitrarilybyCSS,butduringrenderingtheimageisscaledtofititslayoutsize. （Ifyour renderingsseemdistorted,tryspecifyingyourwidthandheightattributesexplicitlyinthe
Theidattributeisn'tspecifictothe
id 属性不是
一般，为元素指定id是个不错的主意，这样使得在脚本中应用更加方便。
The
然而这些样式并不会对canvas实际生成的图像产生什么影响。
下面我们会看到如何应用样式。
如果不指定样式，canvas默认是全透明的。
替用内容
Becausethe
因为
Luckilythisisverystraightforward:
wejustprovidealternativecontentinsidethecanvaselement.Browserswhodon'tsupportitwillignoretheelementcompletelyandrenderthefallbackcontent,otherswilljustrenderthecanvasnormally.
Forinstancewecouldprovideatextdescriptionofthecanvascontentorprovideastaticimageofthedynamicallyrenderedcontent.Thiscanlooksomethinglikethis:
我们只需要直接在canvas元素内插入替用内容即可。
不支持canvas的浏览器会忽略canvas元素而直接渲染替用内容，而支持的浏览器则会正常地渲染canvas。
例如，我们可以把一些文字或图片填入canvas内，作为替用内容：
currentstockprice:
$3.15+0.15
结束标签是必须的
IntheAppleSafariimplementation,
在AppleSafari里，
然而，为了使）是必须的。
Iffallbackcontentisnotneeded,asimplewillbefullycompatiblewithbothSafariandMozilla--Safariwillsimplyignoretheendtag.
如果没有替用内容，对Safari和Mozilla是完全兼容的——Safari会简单地忽略结束标签。
Iffallbackcontentisdesired,someCSStricksmustbeemployedtomaskthefallbackcontentfromSafari（whichshouldrenderjustthecanvas）,andalsotomasktheCSStricksthemselvesfromIE（whichshouldrenderthefallbackcontent）.
如果有替用内容，那么可以用一些CSS技巧来为并且仅为Safari隐藏替用内容，因为那些替用内容是需要在IE里显示但不需要在Safari里显示。
渲染上下文（RenderingContext）
我们专注于2D渲染上，这也是目前唯一的选择，可能在将来会添加基于OpenGLES的3D上下文。
The
getContext（）接受一个用于描述其类型的值作为参数。
varcanvas=document.getElementById（'tutorial'）;
varctx=canvas.getContext（'2d'）;
InthefirstlineweretrievethecanvasDOMnodeusingthegetElementByIdmethod.WecanthenaccessthedrawingcontextusingthegetContextmethod.
上面第一行通过getElementById方法取得canvas对象的DOM节点。
然后通过其getContext方法取得其画图操作上下文。
检查浏览器的支持
Thefallbackcontentisdisplayedinbrowserswhichdonotsupport
除了在那些不支持 的浏览器上显示替用内容，还可以通过脚本的方式来检查浏览器是否支持canvas。
方法很简单，判断getContext是否存在即可。
varcanvas=document.getElementById（'tutorial'）;
if（canvas.getContext）{
varctx=canvas.getContext（'2d'）;
//drawingcodehere
}else{
//canvas-unsupportedcodehere
}
代码模板
Hereisaminimalistictemplate,whichwe'llbeusingasastartingpointforlaterexamples.Youcandownloadthisfiletoworkwithonyoursystem.
我们会用下面这个最简化的代码模板来（后续的示例需要用到）作为开始，你可以下载文件到本地备用。
Canvastutorial
functiondraw（）{
varcanvas=document.getElementById（'tutorial'）;
if（canvas.getContext）{
varctx=canvas.getContext（'2d'）;
}
}
canvas{border:
1pxsolidblack;}