HTML5之画布（canvas）（一）

从步入大学，一直没学到什么真实的技术，但是大一对HTML还算有点兴趣，然后今年就了解了一下HTML5。不看不知道，一看吓一跳。HTML5的功能真的太强大了，而且做出的效果也十分好看。

最近接触到canvas也就是画布，感觉很神奇，所以这篇文章简单介绍一下canvas。

1.那么什么是canvas呢？

Canvas元素是HTML5的一部分，允许脚本语言动态渲染位图像。Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度。JavaScript代码可以访问该地区，通过一套完整的绘图功能类似于其他通用二维的API，从而生成动态的图形。

<canvas>
浏览器不支持canvas
</canvas>

如果浏览器支持的话，那么将会有一个300px * 150px的透明块。如果浏览器不支持，那么将会显示替换成文字：“浏览器不支持canvas”

2.canvas通过 JavaScript 来绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成，比如下述代码：

<script type="text/javascript">
var c=document.getElementById("Canvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

下面我们分解一下上面的代码：

a. JavaScript 使用 id 来寻找 canvas 元素，如下：

var c=document.getElementById("Canvas");

b. 然后，创建 context 对象：

var cxt=c.getContext("2d");

c. getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。下面的两行代码绘制一个红色的矩形：

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。