Canvas标签笔记 (1)

elementstorm · 发表于 2013-1-29 13:56:09

参考自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 > <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); }}

效果如下:

		自动登录	找回密码
密码			立即注册