[HTML5资料]Canvas入门基础教程.pdf

286

81页

0次

2021-02-22

50墨值下载

HTML5 资料

1 Canvas

Canvas

Canvas 教程

<canvas> 是一个新的用于通过脚本（通常是 JavaScript ）绘图的 HTML 元素。例如，他可以用于绘

图、制作图片的组合或者简单的动画（当然并不那么简单）。 It can for instance be used to draw

graphs, make photo compositions or do simple (and not so simple) animations.

1.1

1.1 基本用法

Basic usage

<canvas> 元素

Let's start this tutorial by looking

the <canvas> element itself.

让我们从

元素的定义开始吧。

This looks a lot like the <img> element, the only difference is that it doesn't 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 isn't 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). It's 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 don't affect the actual drawing on the canvas. We'll 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 实际

of 81

50墨值下载

关注