HTML5 <canvas> 元素为我们使用 JavaScript 绘制图形提供了一种简单而又强大的方式。它可以用来绘制图表，制作摄影作品或者做一些简单（以及复杂）的动画。
这里有一个简单的 <canvas> 元素，除了所有核心的 HTML5 属性，比如 id，name 和 class 等等之外，它只有两个特定的属性 width 和 height。
<canvas id="mycanvas" width="100" height="100"></canvas>
使用 _getElementById()__ 方法很容易找到这个 <canvas> 元素，如下所示：
var canvas = document.getElementById("mycanvas");
我们来看一个在 HTML5 文档中使用 <canvas> 元素的简单示例。
<!DOCTYPE HTML>
<html>
<head>
<style>
#mycanvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="100" height="100"></canvas>
</body>
</html>
渲染上下文
<canvas> 初始为空，要显示某物，脚本首先需要访问渲染上下文，然后再上面绘图。
canvas 元素有一个叫做 getContext 的 DOM 方法，用于获得渲染上下文和它的绘图功能。这个函数接受一个参数，2d 上下文类型。
下面的代码就是访问需要的上下文以及检测浏览器是否支持 <canvas> 元素：
var canvas = document.getElementById("mycanvas");
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
浏览器支持
最新版的 FireFox，Safari，Chrome 和 Opera 都支持 HTML5 Canvas，但是 IE8 不支持原生 Canvas。
我们可以使用 ExplorerCanvas 让 IE 浏览器支持 Canvas。只需按照如下方式引入这个脚本即可：
<!--[if IE]><script src="excanvas.js"></script><![endif]-->
