HTML5新元素–Canvas_第2页_H5之家 - 中国HTML5教程资源分享第一站

代码示例：

<canvas> //支持canvas的浏览器解析它
current stock price: $3.15 +0.15 //不支持canvas的浏览器解析它
</canvas>

<canvas> //同上
<img src="images/clock.png" alt=""/>
</canvas>必要的</canvas>结尾
在Safari中，<canvas>就像<img>标签一样被对待，所以</canvas>结尾不是必需的，然而在一些老版本的Firefox上，</canvas>是必需的，正确的写法是让<canvas></canvas>成对的出现。

渲染方式

<canvas>在浏览器中创建一个固定大小的具有一层或多层结构的平面（译注：你可以理解为N片大小相同的玻璃并在一起，你可以在每一片玻璃上画画），目前<canvas>可用的一些绘图方式都是基于2D平面的，在未来，也许<canvas>可以增加一些3D的绘图方式，比如基于OpenGL ES的一些新特性。

浏览器刚载入<canvas>时，它里面是空白的，接下来你可以利用javaScript脚本为其增加背景图片，或是在其上绘画。<canvas>有一个标准的DOM方法：getContext ，用于引用<canvas>内部的内容。getContext()有一个参数，用于指定其绘图的类型（2D或3D）。

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');检查浏览器是否支持
在上面的“平稳退化”部分我们在HTML中为不支持<canvas>的浏览器准备了一部分不同的内容，同样，在javaScript中，我们也可以通过检查getContext方法，来确定浏览器是否支持<canvas>，代码如下：

var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// 为支持getContext的浏览器准备的内容
} else {
// 为不支持getContext的浏览器准备的内容
}一个基本的框架
下面是一个基本的使用<canvas>的框架代码，接下来几章的一些实例我们将用到它，建议你下载此文件到你的计算机。

<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>一个简单的实例
接下来我们以一个简单的实例结束此章：我们在<canvas>中绘入两个矩形，其中一个具有50%的透明度。

查看此例

<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)";//rgba分别对应red,green,blue,alpha
        ctx.fillRect (30, 30, 55, 50);
      }
    }
</script>
</head>
<body>
   <canvas></canvas>
</body>
</html>