基本语法（Basic usage）_H5之家 - 中国HTML5教程资源分享第一站

原文：

好，现在开始我们的canvas探究之旅……

乍看上去，该标签类似于<img>，不过它不支持src和alt属性，<canvas>标签仅仅支持2个属性：width和height。当宽度和高度没有指定时，他们的默认值为300px和150px。该元素可以象任何普通的图像一样应用样式（margin、border、background等）。但是这些样式设置并不影响canvas实际的绘制效果。在后续的介绍中我们将知道这是如何发生的，当没有在<canvas>上应用任何样式的时候，其初始化默认是完全透明的。

其实我们还可以为canvas标签指定id或者class等HTML元素都支持的属性，尤其是为canvas指定一个id，将为今后在脚本操作时指定DOM起到一个关键的作用。

Fallback content

值得注意的是，由于canvas在目前来讲，还不是一个被所有浏览器都支持的标签，当一个浏览器不支持该标签时，我们需要提供一个“fallback content”来进行告知。

很简单，我们可以写些提示信息在<canvas>标签内，不支持该标签的浏览器将自动忽略标签并显示标签中的文字，而当支持该标签的浏览器解析它时，标签内的告知文本亦会被忽略。

举个例子，我们可以采用如下方法对不支持canvas标签的浏览器进行告知：

<canvas> current stock price: $3.15 +0.15 </canvas> <canvas> <img src="images/clock.png" alt=""/> </canvas> Required </canvas> tag

在Apple的Safari浏览器的解析中，canvas标签的表现有些类似于<img>，浏览器不检测关门标记。所以，当canvas标签被正常渲染后，标签里面的“fallback content”也会一起显示出来。当然，这个状况在FireFox中不会存在。

如果不需要“fallback content”，一个简单的“<canvas ...></canvas>”会最大限度的兼容safari和FireFox浏览器，此时，safari浏览器只是简单的忽略</canvas>标记，不过，一点影响都没有。

当然，如果我们一定要写点“fallback content”的话，我们可以运用一些CSS小技巧，将溢出的内容隐藏掉。

The Rendering Context

<canvas>标签实际上创建了一个指定尺寸的画板，供一个或多个指令进行渲染作画。目前，我们只是注重于其2D渲染功能，不过将来，该标签应该能够支持一些更复杂的指令渲染，比如基于OpenGL指令的3D内容。

<canvas>初始只不过是一个空的画板，如果想要让它显示些什么，首先需要脚本去访问它。canvas带有一个DOM方法：getContext。申明了这个方法，我们便可以获得进行画图创作的一些内部函数，getContext方法带有一个参数——context的维数。

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

首先我们制定了一个canvas的DOM节点，并执行getContext方法来访问“drawing contex”，目前支持的参数只有“2d”。

Checking for support

利用以下方法可以很好的规避不支持canvas标签的浏览器：

var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); // drawing code here } else { // canvas-unsupported code here } A skeleton template

这里提供一个简单的模板，我们将在后面的例子中运用到这样一个标准模板。

<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> <canvas></canvas> </body> </html>

在以上模板中，我们定义了一个叫draw的方法，并在页面加载完成后执行它。当然，如果你愿意，你完全可以由其他事件来触发该函数。

A simple example

在下面的示例中，我们画了2个相互交叠的举行，并且其中一个还加上了点alpha透明，接下来，我们将在后面的几个实例中探索一下一些功能是如何实现的：

<html>
<head>
<script type="application/x-javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }
</script>
</head>
<body>
   <canvas></canvas>
</body>
</html>

2010-1-26网络

Canvas/VML/SVG