Canvas绘图
H5原生技术，基于网页画布2D位图绘图技术，善于表现细腻颜色，可用于统计图表、页面游戏、地图应用、网页特效等。
使用Canvas的步骤：
<canvas id="c2" width="400" height="300"></canvas>
Canvas自身是一个300*150的inline-block元素；注意：Canvas画布尺寸不能使用CSS设置——会对整个图像进行扭曲！
使用H5 Canvas API进行绘图：
var ctx = c2.getContext('2d');
//绘制矩形
ctx.fillStyle = '#000' 填充颜色/渐变色对象
ctx.strokeStyle = '#000' 描边颜色/渐变色对象
ctx.lineWidth = 1 描边线宽度
ctx.fillRect(x, y, w, h)： 填充矩形
ctx.strokeRect(x, y, w, h)： 描边矩形
ctx.clearRect(x, y, w, h)： 描边矩形
//绘制文本
ctx.font = '10px sans-serif'
ctx.textBaseline = 'alphabetic/top/bottom'
ctx.fillStyle = '#000'
ctx.strokeStyle = '#000'
ctx.fillText(txt, x, y) 填充文本
ctx.strokeText(txt, x, y) 描边文本
ctx.measureText(txt).width 测量文本基于当前字体设置的宽度
//绘制路径——概念上类似于PS中的钢笔工具
ctx.beginPath()
ctx.moveTo()
ctx.lineTo()
ctx.arc()
ctx.rect()
ctx.ellipse()
ctx.closePath()
-----------------------------
ctx.stroke() 基于现有路径进行描边
ctx.fill() 基于现有路径进行填充
ctx.clip() 基于现有路径进行裁切
//绘制图像
ctx.drawImage(img, x, y) 绘制图像(原始尺寸)
ctx.drawImage(img, x, y, w, h) 绘制图像(指定尺寸)
//绘图上下文变形和状态保持
ctx.rotate() 图像旋转
ctx.translate() 图像平移
ctx.scale() 图像缩放
------------------
ctx.save() 绘图上下文的保存
ctx.restore() 绘图上下文的恢复
2.Chart.js —— 了解
简单且灵活的JS图表绘制工具库，基于Canvas实现。类似于的工具还有ECharts、FreeChart、FusionCharts.....
官网：http://www.chartjs.org/
基本使用方法：
<canvas id="c3"></canvas>
<script src="js/Chart.js"></script>
<script>
new Chart(c13, {
type: 'bar/line/pie',
data: {
labels: ['','','',''],
datasets: [{
label: '',
data: [...]
} ]
}
});
</script>
