<<  Canvas使用教程——开题 | 首 页 | Canvas使用教程——图形绘制  >>

  • Canvas使用教程——基本语法 - [XHTML]

    2008-09-24

    Tag：canvas HTML5 firefox Gecko JavaScript

    原文：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>

     


    历史上的今天：


    随机文章：


    收藏到：Del.icio.us




    引用地址：
    Jim 发表于15:48:30 | 编辑 | 继续话题 | 转发 | 分享　0