参考自[url]https://developer.mozilla.org/en/Canvas_tutorial[/url]
<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); }}
效果如下:
[img]https://developer.mozilla.org/@api/deki/files/602/=Canvas_ex1.png[/img]
