Basic usage:
The lt;canvasgt; element
lt;canvas id='tutorial' width='150' height='150'gt;lt;/canvasgt;
At first sight a lt;canvasgt; looks like the lt;imggt; element, with the only clear difference being that it doesn#39;t have the src and alt attributes. Indeed, the lt;canvasgt; element has only two attributes, width and height. These are both optional and can also be set using DOM properties. When no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high. The element can be sized arbitrarily by CSS, but during rendering the image is scaled to fit its layout size: if the CSS sizing doesn#39;t respect the ratio of the initial canvas, it will appear distorted.
Note: If your renderings seem distorted, try specifying your width and height attributes explicitly in the lt;canvasgt; attributes, and not using CSS.
The id attribute isn#39;t specific to the lt;canvasgt; element but is one of the global HTML attributes which can be applied to any HTML element (like class for instance). It is always a good idea to supply an id because this makes it much easier to identify it in a script.
The lt;canvasgt; element can be styled just like any normal image (margin, border, backgroundhellip;). These rules, however, don#39;t affect the actual drawing on the canvas. We#39;ll see how this is done in a dedicated chapter of this tutorial. When no styling rules are applied to the canvas it will initially be fully transparent.
Fallback content
The lt;canvasgt; element differs from an lt;imggt; tag in that, like for lt;videogt;, lt;audiogt;, or lt;picturegt;elements, it is easy to define some fallback content, to be displayed in older browsers not supporting it, like versions of Internet Explorer earlier than version 9 or textual browsers. You should always provide fallback content to be displayed by those browsers.
Providing fallback content is very straightforward: just insert the alternate content inside the lt;canvasgt; element. Browsers that don#39;t support lt;canvasgt; will ignore the container and render the fallback content inside it. Browsers that do support lt;canvasgt; will ignore the content inside the container, and just render the canvas normally.
For example, we could provide a text description of the canvas content or provide a static image of the dynamically rendered content. This can look something like this:
lt;canvas id='stockGraph' width='150' height='150'gt;
current stock price: $3.15 0.15
lt;/canvasgt;
lt;canvas id='clock' width='150' height='150'gt;
lt;img src='images/clock.png' width='150' height='150' alt=''/gt;
lt;/canvasgt;
Telling the user to use a different browser that supports canvas does not help users who can#39;t read the canvas at all, for example. Providing a useful fallback text or sub DOM helps to make the canvas more accessible.
Required lt;/canvasgt; tag
As a consequence of the way fallback is provided, unlike the lt;imggt; element, the lt;canvasgt;element requires the closing tag (lt;/canvasgt;). If this tag is not present, the rest of the document would be considered the fallback content and wouldn#39;t be displayed.
If fallback content is not needed, a simple lt;canvas id='foo' ...gt;lt;/canvasgt; is fully compatible with all browsers that support canvas at all.
The rendering context
The lt;canvasgt; element creates a fixed-size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown. In this tutorial, we focus on the 2D rendering context. Other contexts may provide different types of rendering; for example, WebGL uses a 3D context based on OpenGL ES.
The canvas is initially blank. To display something, a script first needs to access the rendering context and draw
全文共52153字，剩余内容已隐藏，支付完成后下载完整资料
基本用法:
lt;canvasgt; 元素
lt;canvasgt; 看起来和 lt;imggt; 元素很相像，唯一的不同就是它并没有 src 和 alt 属性。实际上，lt;canvasgt;标签只有两个属性—— width和height。这些都是可选的，并且同样利用 DOM properties 来设置。当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。
注意: 如果你绘制出来的图像是扭曲的, 尝试在lt;canvasgt;的属性中明确规定宽和高，而不是使用CSS。
id属性并不是lt;canvasgt;元素所特有的而是每一个HTML元素（比如class元素）都默认具有的属性。给每个标签都加上一个id属性是个好主意，因为这样你就能在我们的脚本中很容易的找到它。
lt;canvasgt;元素可以像任何一个普通的图像一样（有margin，border，background等等属性）被设计。这些样式，然而，不会影响在canvas中的实际图像。我们将会在一个专门的章节里看到这是如何解决的。当开始时没有为canvas规定样式规则，其将会完全透明。
替换内容
lt;canvasgt;元素不同于在其中的lt;imggt;标签，就像lt;videogt;，lt;audiogt;，或者 lt;picturegt;元素一样，很容易定义一些替代内容。由于某些较老的浏览器（尤其是IE9之前的IE浏览器）或者文本浏览器不支持HTML元素'canvas'，在这些浏览器上你应该总是能展示替代内容。
这非常简单：我们只是在lt;canvasgt;标签中提供了替换内容。支持lt;canvasgt;的浏览器将会忽略在容器中包含的内容，并且只是正常渲染canvas。
举个例子，我们可以提供对canvas内容的文字描述或者是提供动态生成内容相对应的静态图片，如下所示：
lt;canvas id='stockGraph' width='150' height='150'gt;
current stock price: $3.15 0.15
lt;/canvasgt;
lt;canvas id='clock' width='150' height='150'gt;
lt;img src='images/clock.png' width='150' height='150' alt=''/gt;
lt;/canvasgt;
lt;/canvasgt; 标签不可省
与 lt;imggt; 元素不同，lt;canvasgt; 元素需要结束标签(lt;/canvasgt;)。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。
如果不需要替代内容，一个简单的 lt;canvas id='foo' ...gt;lt;/canvasgt; 在所有支持canvas的浏览器中都是完全兼容的。
渲染上下文（The rendering context）
lt;canvasgt; 元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。我们将会将注意力放在2D渲染上下文中。其他种类的上下文也许提供了不同种类的渲染方式；比如， WebGL 使用了基于OpenGL ES的3D上下文 ('experimental-webgl') 。
canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。lt;canvasgt; 元素有一个做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。对于2D图像而言，如本教程，你可以使用 CanvasRenderingContext2D。
var canvas = document.getElementById(#39;tutorial#39;);
var ctx = canvas.getContext(#39;2d#39;);
代码的第一行通过使用 document.getElementById() 方法来为 lt;canvasgt; 元素得到DOM对象。一旦有了元素对象，你可以通过使用它的getContext() 方法来访问绘画上下文。
检查支持性
替换内容是用于在不支持 lt;canvasgt; 标签的浏览器中展示的。通过简单的测试getContext()方法的存在，脚本可以检查编程支持性。上面的代码片段现在变成了这个样子：
var canvas = document.getElementById(#39;tutorial#39;);
if (canvas.getContext){
var ctx = canvas.getContext(#39;2d#39;);
// drawing code here
} else {
// canvas-unsupported code here
}
一个模板骨架
这里的是一个最简单的模板，我们之后就可以把它作为之后的例子的起点。
注意: 为了简洁, 我们在HTML中内嵌了script元素, 但并不推荐这种做法。
lt;htmlgt;
lt;headgt;
lt;titlegt;Canvas tutoriallt;/titlegt;
lt;script type='text/javascript'gt;
function draw(){
var canvas = document.getElementById(#39;tutorial#39;);
if (canvas.getContext){
var ctx = canvas.getContext(#39;2d#39;);
}
}
lt;/scriptgt;
lt;style type='text/css'gt;
canvas { border: 1px solid black; }
lt;/stylegt;
lt;/headgt;
lt;body onload='draw();'gt;
lt;canvas id='tutorial' width='150' height='150'gt;lt;/canvasgt;
lt;/bodygt;
lt;/htmlgt;
上面的脚本中包含一个叫做draw()的函数，当页面加载结束的时候就会执行这个函数。通过使用在文档上加载事件来完成。只要页面加载结束，这个函数，或者像是这个的，同样可以使用 window.setTimeout()， window.setInterval()，或者其他任何事件处理程序来调用。
模板看起来会是这样。如这里所示，它最初是空白的。
一个简单例子
一开始，让我们来看个简单的例子，我们绘制了两个有趣的长方形，其中的一个有着alpha透明度。我们将在接下来的例子里深入探索一下这是如何工作的。
lt;htmlgt;
lt;headgt;
lt;script type='application/javascript'gt;
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
全文共27262字，剩余内容已隐藏，支付完成后下载完整资料
资料编号：[144319]，资料为PDF文档或Word文档，PDF文档可免费转换为Word
以上是毕业论文外文翻译，课题毕业论文、任务书、文献综述、开题报告、程序设计、图纸设计等资料可联系客服协助查找。
