[HTML资料]Canvas教程.docVIP

HTML5资料-非常好 Canvas教程 canvas是一个新的用于通过脚本（通常是JavaScript）绘图的HTML元素。例如，他可以用于绘图、制作图片的组合或者简单的动画（当然并不那么简单）。It can for instance be used to draw graphs, make photo compositions or do simple (and not so simple) animations. 基本用法 ?canvas元素 让我们从canvas元素的定义开始吧。 canvas id=tutorial width=150 height=150/canvas canvas看起来很像img，唯一不同就是它不含 src 和 alt 属性。它只有两个属性，width 和 height，两个都是可选的，并且都可以 DOM 或者 CSS 来设置。如果不指定width 和 height，默认的是宽300像素，高150像素。虽然可以通过 CSS 来调整canvas的大小，但渲染图像会缩放来适应布局的（如果你发现渲染结果看上去变形了，不必一味依赖CSS，可以尝试显式指定canvas的width 和 height 属性值）。 id? 属??不是canvas专享的，就像标准的HTLM标签一样，任何一个HTML元素都可以指定其 id 值。一般，为元素指定 id 是个不错的主意，这样使得在脚本中应用更加方便。 canvas元素可以像普通图片一样指定其样式（边距，边框，背景等等）。然而这些样式并不会对canvas实际生成的图像产生什么影响。下面我们会看到如何应用样式。如果不指定样式，canvas默认是全透明的。 替用内容 因为 canvas 相对较新，有些浏览器并没实现，如Firefox 1.0 和 Internet Explorer，所以我们需要为那些不支持canvas的浏览器提供替用显示内容。 我们只需要直接在canvas元素内插入替用内容即可。不支持canvas的浏览器会忽略canvas元素而直接渲染替用内容，而支持的浏览器则会正常地渲染canvas。例如，我们可以把一些文字或图片填入canvas内，作为替用内容： canvas id=stockGraph width=150 height=150 ? current stock price: $3.15 +0.15 /canvas canvas id=clock width=150 height=150 ? img src=images/clock.png width=150 height=150/ /canvas 结束标签 /canvas 是必须的 在Apple Safari里，canvas的实现跟img很相似，它并不没有结束标签。然而，为了使 canvas 能在web的世界里广泛适用，需要给替用内容提供一个容身之所，因此，在Mozilla的实现里结束标签(/canvas)是必须的。 如果没有替用内容，canvas id=foo .../canvas 对 Safari 和 Mozilla 是完全兼容的—— Safari 会简单地忽略结束标签。 如果有替用内容，那么可以用一些 CSS 技巧来为并且仅为 Safari 隐藏替用内容，因为那些替用内容是需要在 IE 里显示但不需要在 Safari 里显示。 渲染上下文（Rendering Context） canvas 创建的固定尺寸的绘图画面开放了一个或多个渲染上下文（rendering context），我们可以通过它们来控制要显示的内容。我们专注于2D 渲染上，这也是目前唯一的选择，可能在将来会添加基于OpenGL ES 的 3D 上下文。 canvas 初始化是空白的，要在上面用脚本画图首先需要其渲染上下文（rendering context），它可以通过 canvas 元素对象的 getContext 方法来获取，同时得到的还有一些画图用的函数。getContext() 接受一个用于描述其类型的值作为参数。 var canvas = document.getElementById(tutorial); var ctx = canvas.getContext(2d); 上面第一行通过 getElementById 方法取得 canvas 对象的 DOM 节点。然后通过其 getContext 方法取得其画图操作上下文。 检查浏览器的支持 除了在那些不支持? 的浏览器上显示替用内容，还可以通过脚本的方式来检查浏览器是否支持 canvas 。方法很简单，判断 getContext 是否存在即可。 var canvas = document.getElementById(tutorial); if (canvas.getCon