Canvas标签札记 (1)

2012-11-06

Canvas标签笔记 (1)参考自https://developer.mozilla.org/en/Canvas_tutorialcanvas是HTML5新增加的标签

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标签札记 (1)"/></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);   }}

效果如下:

热点排行

Web前端

Canvas标签札记 (1)