Hello~ HTML5&CSS3 （一）： 你好 Canvas
HTML5风暴来袭，其最大的变化莫过于 Canvas 这个奇妙的绘画板， 没错！我们的UI会通过它变得更加生动。
你还不会用这个新的元素吗？ 那么看下面的文章，你会得到些收获。
-------------------------------- 非华丽分割线 --------------------------------
我们先通过几个问题来了解一下 Canvas 这个新玩意儿。
Q1 : Convas 是什么？
Convas是个矩形，它是个画布。
Q2: 如何定义Convas?
<canvas id="canvas" width="200"height="100"></canvas> -- 它的大小是由width、height来操控的，类似于DIV元素。
Q3:如何操作Convas？
JavaScript
-------------------------------- 非华丽分割线 --------------------------------
OK 到这里应该对Canvas 稍有了解了吧。 那么我们继续。
<canvas id="canvas" width="200"height="100"></canvas>
在此我们定义了一个canvas, 中间也是可以写入字符串。 如下
<canvas id="canvas" width="200"height="100"> <p>我的内容啊~！ -v- </p> </canvas>
OK我们执行一下获得了如下的图。
<- 没错这是张图
哦？ 空白什么也没有。 OK 你没有看错注意下面这句。
canvas中间的的内容 只有在canvas标签不可用的时候显示出来。
canvas元素主要是通过JS来进行操作的。 其主要的操作方式是：
/* 第一步：获取canvas画布对象。 */ var canvas =document.getElementById("canvas"); /* 第二步：从canvas对象中获取画笔 ( 像传统的高级语言 ) */ var context2D =canvas.getContext("2d");
------ API -----
void fillText(text, left,top, [maxWidth]);
void fillText("需要绘制的文本内容", “相对画布横坐标”, “相对画布纵坐标”, [“最大字符串数量”]);
这是我们使用的第一个API函数 其中最后一个参数为可选填参数。
------ 完整代码 ----
到现在我们给出完整的代码： 第一个html5程序就诞生了。
<!DOCTYPE HTML> <html> <body> <canvas id="canvas" width="200"height="100"> <p>我的内容啊~！ -v- </p> </canvas> <script type="text/javascript"> window.onload = function() { var canvas =document.getElementById("canvas"); var context2D =canvas.getContext("2d"); context2D.font ="30px Times New Roman"; context2D.fillText("HelloCanvas!", 10, 35); } </script> </body> </html>
在此要注意浏览器的版本： 我使用的是 FireFox11.0的 版本。
效果如下。
