简述
HTML5 规范引进了很多新特性，其中最令人期待的之一就是 canvas 元素。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法，此方法使用简单但功能强大。每一个 canvas 元素都有一个"上下文( context )" (想象成绘图板上的一页)，在其中可以绘制任意图形。浏览器支持多个 canvas 上下文，并通过不同的 API 提供图形绘制功能。大部分的浏览器都支持 2D canvas 上下文——包括 Opera, Firefox, Konqueror 和 Safari。而且某些版本的 Opera 还支持 3D canvas ，Firefox 也可以通过插件形式支持 3D canvas
本文介绍 2D canvas基础以及如何使用基本 canvas 函数，如线条、形状、图像和文字等。为了理解此文章，你最好了解 JavaScript 基础知识。
可以点击此处批量下载本文实例代码
?
| ?本文中的例子的超链接连接到网址全是HTML5网页，目前支持HTML5的浏览器有 Chrom,FireFox 3.6等，IE目前不支持HTML5，也就是说你用IE看本页面的一些例子的超链接是看不到的。 |
?
?
canvas 基础
创建 canvas 的方法很简单，只需要在 HTML 页面中添加 <canvas>元素：
复制内容到剪贴板
- <canvas?id="myCanvas"?width="300"?height="150">? ??
- Fallback?content,?in?case?the?browser?does?not?support?Canvas.? ??
- </canvas>??
?
为了能在 JavaScript 中引用元素，最好给元素设置 ID ；也需要给 canvas 设定高度和宽度。
创建好了画布后，让我们来准备画笔。要在画布中绘制图形需要使用 JavaScript 。首先通过 getElementById函数找到 canvas元素，然后初始化上下文。之后可以使用上下文 API 绘制各种图形。下面的脚本在 canvas 中绘制一个矩形 (点击此处查看效果)：
?
复制内容到剪贴板
- //?Get?a?reference?to?the?element.? ??
- var?elem?=?document.getElementById('myCanvas');? ??
- ??
- //?Always?check?for?properties?和?methods,?to?make?sure?your?code?doesn't?break?? ??
- //?in?other?browsers.? ??
- if?(elem?&&?elem.getContext)?{? ??
- ??//?Get?the?2d?context.? ??
- ??//?Remember:?you?can?only?initialize?one?context?per?element.? ??
- ??var?context?=?elem.getCo
