HTML5资料Canvas教程剖析.docx
《HTML5资料Canvas教程剖析.docx》由会员分享，可在线阅读，更多相关《HTML5资料Canvas教程剖析.docx（70页珍藏版）》请在冰豆网上搜索。
HTML5资料Canvas教程剖析
HTML5资料-非常好
1Canvas教程
例如，他可以用于绘图、制作图片的组合或者简单的动画（当然并不那么简单）。
Itcanforinstancebeusedtodrawgraphs,makephotocompositionsordosimple（andnotsosimple）animations.
1.1基本用法
让我们从
它只有两个属性，width和height，两个都是可选的，并且都可以DOM或者CSS来设置。
如果不指定width和height，默认的是宽300像素，高150像素。
虽然可以通过CSS来调整canvas的大小，但渲染图像会缩放来适应布局的（如果你发现渲染结果看上去变形了，不必一味依赖CSS，可以尝试显式指定canvas的width和height属性值）。
id 属性不是
一般，为元素指定id是个不错的主意，这样使得在脚本中应用更加方便。
然而这些样式并不会对canvas实际生成的图像产生什么影响。
下面我们会看到如何应用样式。
如果不指定样式，canvas默认是全透明的。
替用内容
因为
我们只需要直接在canvas元素内插入替用内容即可。
不支持canvas的浏览器会忽略canvas元素而直接渲染替用内容，而支持的浏览器则会正常地渲染canvas。
例如，我们可以把一些文字或图片填入canvas内，作为替用内容：
currentstockprice:
$3.15+0.15
结束标签是必须的
在AppleSafari里，
然而，为了使）是必须的。
如果没有替用内容，对Safari和Mozilla是完全兼容的——Safari会简单地忽略结束标签。
如果有替用内容，那么可以用一些CSS技巧来为并且仅为Safari隐藏替用内容，因为那些替用内容是需要在IE里显示但不需要在Safari里显示。
渲染上下文（RenderingContext）
我们专注于2D渲染上，这也是目前唯一的选择，可能在将来会添加基于OpenGLES的3D上下文。
getContext（）接受一个用于描述其类型的值作为参数。
varcanvas=document.getElementById（'tutorial'）;
varctx=canvas.getContext（'2d'）;
上面第一行通过getElementById方法取得canvas对象的DOM节点。
然后通过其getContext方法取得其画图操作上下文。
检查浏览器的支持
除了在那些不支持 的浏览器上显示替用内容，还可以通过脚本的方式来检查浏览器是否支持canvas。
方法很简单，判断getContext是否存在即可。
varcanvas=document.getElementById（'tutorial'）;
if（canvas.getContext）{
varctx=canvas.getContext（'2d'）;
//drawingcodehere
}else{
//canvas-unsupportedcodehere
}
代码模板
我们会用下面这个最简化的代码模板来（后续的示例需要用到）作为开始，你可以下载文件到本地备用。
Canvastutorial
functiondraw（）{
varcanvas=document.getElementById（'tutorial'）;
if（canvas.getContext）{
varctx=canvas.getContext（'2d'）;
}
}
canvas{border:
1pxsolidblack;}