[HTML5资料]Canvas教程..docx

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.基本用法Basic usage?canvas元素Lets start this tutorial by looking at the canvas element itself.?让我们从canvas元素的定义开始吧。canvas id=tutorial width=150 height=150/canvasThis looks a lot like the img element, the only difference is that it doesnt have the src and alt attributes. canvas看起来很像img，唯一不同就是它不含 src 和 alt 属性。The canvas element has only two attributes - width and height. These are both optional and can also be set using DOM properties or CSS rules.它只有两个属性，width 和 height，两个都是可选的，并且都可以 DOM 或者 CSS 来设置。 When no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high.如果不指定width 和 height，默认的是宽300像素，高150像素。The element can be sized arbitrarily by CSS, but during rendering the image is scaled to fit its layout size.?? (If your? renderings seem distorted, try specifying your width and height attributes explicitly in the canvas attributes, and not with CSS.)虽然可以通过 CSS 来调整canvas的大小，但渲染图像会缩放来适应布局的（如果你发现渲染结果看上去变形了，不必一味依赖CSS，可以尝试显式指定canvas的width 和 height 属性值）。The id attribute isnt specific to the canvas element but is one of default HTML attributes which can be applied to (almost) every HTML element (like class for instance). Its always a good idea to supply an id because this makes it much easier to identify it in our script.id? 属性不是canvas专享的，就像标准的HTLM标签一样，任何一个HTML元素都可以指定其 id 值。一般，为元素指定 id 是个不错的主意，这样使得在脚本中应用更加方便。The canvas element can be styled just like any normal image (margin, border, background, etc). These rules however dont affect the actual drawing on the canvas. Well see how this is done later in this tutorial. When no styling rules are applied to the canvas it will initially be fully transparent. canvas元素可以像普通图片一样指定其样式（边距，边框，背景等等）。然而这些样式并不会对canvas实际生成的图像产生什么影响。下面我们会看到如何应用样式。如果不指定样式，canvas默认是全透明的。替用内容Because the canvas element