HTML5新元素–Canvas

时间:2015-08-08

基本特性
<canvas>是HTML5里面定义的一个新元素,你能够在此元素里绘画、嵌入图片并使用javaScript脚本产生一段动画。

<canvas>首次在Mac OS X中的Dashboard中被引入,之后又被苹果公司的Safari浏览器所支持,采用Gecko1.8+引擎的浏览器都支持此标签(译注:Safari及Chrome采用的Webkit引擎也支持此标签),在W3C标准中,<canvas>元素做为Web application 1.0标准的一部分被引入——同时,我们也称其为HTML5 。

本文档旨在指导你如何在你的HTML文档中使用<canvas>元素,并提供一些简明的实例以助您更好的理解它。

准备工作
在使用<canvas>之前,你需要了解一些基本的HTML及Javascript知识。

并且,请确保你使用的浏览器能正确的支持<canvas>标签,我们向你推荐Firefox 1.5+/Opera 9/Safari 3+/Chrome,无论如何,请不要在IE上调试包含<canvas>标签的代码。

 

--------------------------------------------------------------------------------

Hello,canvas
示例代码:

<canvas id="tutorial" width="150" height="150"></canvas>它看起来很像<img>标签,不同的是它没有src和alt属性,它的height和width属性是可选的,你也可以在CSS属性里对其指定高宽度,但这样做的话,其内部绘入的图像可能因为缩放大小而扭曲,所以,如果你在<canvas>中绘入的图像看起来似乎有点不一样,请尝试在CSS属性里去掉高宽度,而在其HTML属性中指定。当你没有给<canvas>指定高宽度时,它将具有默认的宽度300px,高度150px的属性。(译注:经在Chrome和Safari中测试,不给高宽度时它们都把<canvas>渲染为300×150px大小,所以,这应该是W3C的一个指导标准,而非Firefox的私有特性。)

 

如同绝大多数HTML标签,你也可以为其指定一个id属性来对它与其它元素进行区分。

<canvas>的表现看起来如同一个普通<img>标签(它也具有margin,border,background等),但这些属性不会影响到最终的绘画输出,本文后部的示例将有助你理解这一点。而如果没有为其定义任何属性的话,<canvas>看起来就如同一个透明的gif。

平稳退化
因为<canvas>还是一个较新的标签,所以在一些老的浏览器中它并不能被正常解析(译注:例如Firefox 1.5和全系列的IE——是的,包括IE8),我们需要做一些工作来平稳退化到这些老的浏览器——这非常简单,老的浏览器不支持<canvas>标签,它们将其忽略掉,而接着解析接下来的内容,这样,我们只需要<canvas>内提供一些替代的内容,如一些文字或者图片,这样,支持<canvas>的浏览器将忽略<canvas>内部的内容,而老的浏览器将忽略<canvas>,各取所需,皆大欢喜。

代码示例:

<canvas id="stockGraph" width="150" height="150">  //支持canvas的浏览器解析它
  current stock PRice: $3.15 +0.15                 //不支持canvas的浏览器解析它
</canvas>

<canvas id="clock" width="150" height="150">       //同上
  <img src="images/clock.png" width="150" height="150" 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 onload="draw();">
    <canvas id="tutorial" width="150" height="150"></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 onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>

上一条:HTML5能否成为Flash终结者 下一条:Html5新标签的使用

相关文章

最新文章