Basic usage

内容表格

1. 元素 <canvas>
1. 1. 1.1.1. Fallback content
2. getContext
1. 2.1. Prevent execution in unsupported browsers
3. Putting it together
1. 1. 3.1.1. Template

元素 `<canvas>`

Let's start this tutorial by looking at the <canvas> element itself.
让我们通过观看<canvas>这个元素开始这个教程。

<canvas id="tutorial" width="150" height="150"></canvas>

This looks a lot like the <img> element, the only difference is that it doesn't have the src and alt attributes. 这个看起来像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.其实这两个都是可选的，可以使用DOM属性，或者CSS样式表来定义。 When no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high.如果没有宽度和高度两个属性，其默认的是300像素宽和150像素高。

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标签一样，ID能被插入到任何一个HTML元素一样。任何时候提供一个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.
<canvas>元素可以像定义图片一样来定义(边距，边框，背景等等）然而这些规则对canvas的实际的图像生成没有任何影响。一会我们会看到这些是如何实际操作的。

When no styling rules are applied to the canvas it will initially be fully transparent.

Fallback content

Because the <canvas> element has only just been introduced and isn't implemented in many browsers, including Firefox 1.0 and Internet Explorer, we need a means of providing fallback content when a browser doesn't support the element.

Luckily this is very straightforward: we just provide alternative content inside the canvas element. Browsers who don't support it will ignore the element completely and render the fallback content, others will just render the canvas normally.
For instance 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:

<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>

Note: Apple's implementation currently differs from the specification in that it doesn't recognize the closing </canvas> tag. This means that in Safari all fallback content will be shown. This can be solved by either using CSS or scripting to hide it.

getContext

If you make an HTML page and load it into Firefox you won't see anything in the area occupied by the <canvas> element. We need a means to get to it to start drawing and that's where getContext comes in. Every canvas element has a DOM method called getContext to access the drawing functions. getContext can only take one parameter and that's the type of drawing context. Currently there's only one context available and that's the 2d context. In the future we might see a 3d context but for now we'll have to stick to the 2d context.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

In the first line we retrieve the DOM node using the getElementById method. We can then access the drawing context using the getContext method.

Prevent execution in unsupported browsers

Just like the fallback content we need a way to prevent browsers who don't support canvas from executing our script. This can easily be done by testing for the getContext method. Our code snippet from above becomes something like this:

var canvas = document.getElementById('canvas');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
}

All drawing code should go inside the if statement, so that the browsers not supporting <canvas> don't try to execute it.

Putting it together

If we put everything together a simple HTML template becomes something like this. I'll be using this setup for all the examples we'll see later in this tutorial.

Template

Download this file

<html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

If you look at the script you'll see I've made a function called draw, which will get executed once the page finishes loading (via the onload attribute on the body tag). This function could also have been called from a setTimeout, setInterval, or any other event handler function just as long the page has been loaded first.

These are the basics. On the following pages we'll finally do some actual drawing.

« Previous Next »

从 "http://developer.mozilla.org/Cn/Canvas_tutorial/Basic_usage" 获取v