Canvas标签札记 (1) _Web前端

Canvas标签笔记 (1)
参考自https://developer.mozilla.org/en/Canvas_tutorial

<canvas>是HTML5新增加的标签,提供一些简单的方法来完成基本绘图和动画效果,由于标准问题,<canvas>的浏览器支持还不好,至少IE是不支持的(最新的IE9没了解过...),已知支持<canvas>的浏览器有Firefox 1.5+,Opera 9,Safari,Chrome.

一基础知识

<canvas id="tutorial" width="150" height="150"></canvas>

这是一个canvas的例子,很简单,你可以把它当成一个<img>标签,常用属性就id,width(默认300px),height(默认150px).

如果浏览器不支持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>

PS:在Firefox中,<canvas .../>是容许的,而Safari不行,为了兼容,还是老老实实的<canvas>..</cavas>吧.

实际上canvas标签是提供一个区域来进行绘图,类似flash中的stage,java中的graphics(不知道比喻对不对,大家看了别骂),为了进行绘图,必须先获得canvas的context(不知道怎么翻译...内容?背景?英语不好,还是不翻译了-_-)

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

以后几乎所有的操作都围绕着这个ctx啦.

大家估计都注意到那个2d了,现在canvas只能2d绘图,据说以后会加入3d功能(flash,sliverlight,javafx要发飙了...)

如果浏览器不支持canvas,最好再加上点判断,比如提醒使用者换个支持canvas的浏览器之类的

var canvas = document.getElementById('tutorial');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  //绘图代码
} else {
  //不支持canvas时的代码
}

下面是一个模板,mozilla官方的,我直接copy下来了,懒得自己敲了,嘿嘿...

<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>

以后的例子都基于这个模板,比如下面这个:

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);
   }
}

效果如下: