Canvas使用教程——基本语法(Basic usage)

原文:http://developer.mozilla.org/en/Canvas_tutorial/Basic_usage 

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

<canvas id="tutorial" width="150" height="150"></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 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" alt=""/>
</canvas>

Required </canvas> tag

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

如果不需要“fallback content”,一个简单的“<canvas id="foo" ...></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 onload="draw();">
    <canvas id="tutorial" width="150" height="150"></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 onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>

加支付宝好友偷能量挖...


评论(0)网络
阅读(118)喜欢(0)Canvas/VML/SVG