一．Canvas的基本介绍
１．什么是Canvas
定义：是HTML5提供的一种新标签, ie9才开始支持的，Canvas是一个矩形区域的画布，可以用JS控制每一个像素在上面绘画。canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
２．Canvas主要应用的领域
1 可视化数据： 各类统计图表，比如:百度的echart
2 场景秀： 用Canvas实现动态的广告效果能够非常融洽的跨平台运行。如:手机中微产品.在移动端兼容性很好
3 游戏： canvas在基于Web的图像显示方面比Flash更加立体、更加精巧，canvas成为HTML5小游戏开发首选。现阶段h5做游戏,营业方式不是很明确. 25 超棒的 HTML5 Canvas 游戏
4 其他可嵌入网站的内容 (多用于活动页面、特效)：类似图表、音频、视频，还有许多元素能够更好地与Web融合，并且不需要任何插件。
5 趋势=> 模拟器： 无论从视觉效果还是核心功能方面来说，模拟器产品可以完全由JavaScript来实现。模拟真实硬件环境,如移动端各种类型手机.
6 趋势=> 远程计算机控制： Canvas可以让开发者更好地实现基于Web的数据传输，构建一个完美的可视化控制界面。
7 趋势=> 图形编辑器： Photoshop图形编辑器将能够100%基于Web实现。
３．Canvas绘制线条
０１Canvas标签语法和属性
canvas：画布油布的意思 英 ['kænvəs] 美 ['kænvəs]
标签名：canvas，双标签，需要闭合。
单位： px，可以设置width和height属性，否则忽略单位。
width和hegiht：默认300*150像素
注意：
不要用CSS控制它的宽和高,会导致内部图片被拉伸，
重新设置canvas标签的宽高属性会让画布擦除所有的内容
可以给canvas画布设置背景色
０２ 浏览器不兼容处理
ie9以上才支持canvas, 其他chrome、Safari、Opera等都支持
只要浏览器兼容canvas，那么就会支持绝大部分api(个别最新api除外)
移动设备几乎支持Canvas的所有API
2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持
如果浏览器不兼容，最好进行友好提示
<canvas id="canvas"> 你的浏览器不支持canvas，请升级浏览器.浏览器不支持，显示此行文本 </canvas>
如果浏览器不兼容，可以使用flash等方式进行替换。
４．Canvas绘图上下文context
Context：Canvas的上下文、绘制环境。
上下文：是所有的绘制操作api的入口或者集合。
Canvas自身无法绘制任何内容，Canvas的绘图是使用JS调用Canvas的接口来完成的。
Context对象就是JavaScript操作Canvas的接口。
使用[CanvasElement].getContext(‘2d’)来获取2D绘图上下文
//获得画布
var canvas = document.getElementById( 'cavsElem' );
//注意：2d小写，二维， 3d：webgl
var ctx = canvas.getContext( '2d' );
５．基本的绘制路径
５．１Ｃanvas绘制的基本说明
canvas坐标系，从最左上角0,0开始。x向右增大， y向下增大
绘制起点：ctx.moveTo(x, y); //x,y 都是相对于 canvas盒子的最左上角。
绘制终点：ctx.lineTo(x, y); //从x,y的位置绘制一条直线到起点或者上一个线头点。
开始路径：ctx.beginPath();作用：将当路径和之前路径隔离,方便你对当前路径进行设置样式,线宽.
闭合路径：ctx.closePath();作用：闭合路径会自动把最后的线头和开始的线头连在一起。
描边：ctx.stroke();
５．２Canvas绘制的基本步骤：
第一步：获得上下文 =>canvasElem.getContext('2d');
第二步：开始路径规划 =>ctx.beginPath()
第三步：移动起始点 =>ctx.moveTo(x, y)
第四步：绘制(点、线、面、图片...) =>ctx.lineTo(x, y)
第五步：闭合路径 =>ctx.closePath();
第六步：绘制描边 =>ctx.stroke();
二.Canvas绘制的基本应用
2.1 Canvas绘制表格-背景
2.2 Canvas绘制表格完成
2.3Canvas绘制画板
2.4Canvas绘制矩形
2.5Canvas绘制弧线
2.6非零正交原则
2.7Canvas绘制五环
2.8Canvas绘制饼状图
2.9Canvas绘制文字
2.10Canvas绘制饼状图以及绘制文字
2.11Canvas绘制图片
2.12Canvas绘制帧动画
