此文档解决以下问题：
一、<canvas>标记的简单使用，输出简单条形图
Canvas是html5语言中最具创新和印象里的元素，尤其它是与数据可视化相关的。通过<canvas>标记，设计师在Web页面桩监理一块预留的任意区域，可以包含在运行时通过编程方式创建的图像。HTML5画布图形时有情调的JavaScript API提供的——大量的API目前都具有良好的跨浏览器支持，并且可以立即使用。
使用<canvas>的第一步是：在HTML页面的<body>区域中包含该标记。只需要在其中包含3个特性：id、width和height。
1.一个完整的一个完整的<canvas>标记列表
<canvas id="chart1" width="600" height="400"> <img src="images/altchart1.jpg" width="600" height="400"> </canvas>
2.初始化画布的基本步骤
1）创建一个变量用于保存画布对象，使用它的id进行识别。
2）检查是否支持画布API的getContext()方法（从而得知他是否支持<canvas>标记）。
3）如果支持，创建一个变量并在目标画布对象上应用getContext()方法。
在实际中，代码如下：
<script type="text/javascript"> function drawCanvas(){ var theChart = document.getElementById('chart1'); if (theChart.getContext){ var theContext = theChart.getContext('2d'); theContext.fillRect(50,200,100,200); } } </script>
3.绘制第一个矩形的完整代码。其中有基本的CSS和HTML，用于将画布居中病显示出轮廓
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Canvas Example 1</title> <script type="text/javascript"> function drawCanvas(){ var theChart = document.getElementById('chart1'); if (theChart.getContext){ var theContext = theChart.getContext('2d'); //fillRect(x,y,width,height)函数绘制一个填充矩形， //参数前两个值用于确定矩形的左上角，后两个参数提供了尺寸，所有的值均已像素为单位 theContext.fillRect(50,200,100,200); } } </script> <style> #outerWrapper { width: 800px; margin: 1em auto; } canvas { border: 1px solid #000; } </style> </head> <body onLoad="drawCanvas();"> <div id="outerWrapper"> <canvas id="chart1" width="600" height="400"> <img src="images/altchart1.jpg" width="600" height="400"> </canvas> </div> </body> </html>
4.运行结果
注意：
画布AP相当强大，可以通过编程的方式执行许多不同的绘图操作。下面是所有操作的列表的一部分：
- 矩形，实体的和空心的
- 任意尺寸的点
- 连接的直线
- 弧形
- 圆形和椭圆，实体的和空心的
- 使用了指定字体、大小和颜色的文本
- 导入图片
- 完整的颜色控制，包括阿尔法透明处理
- 任意颜色组合的渐变，线性的或放射性的
- 任意对象或文本的阴影
- 任意对象的模式，在指定方向进行重复
基于<canvas>标记输出的图标插件：
- CahrJS
- RGraph
- FusionCharts
- Flot