一、canvas 简介
1.1 什么是 canvas？
canvas是 HTML5 提供的一种新标签。
英 ['kænvəs] 美 ['kænvəs] 帆布 画布
Canvas 是一个矩形区域的画布，可以用 JavaScript 在上面绘画。控制其每一个像素。
canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
HTML5 之前的 web 页面只能用一些固定样式的标签：比如 p、div、h1 等。
1.2 canvas 主要应用的领域
1.游戏：canvas 在基于 Web 的图像显示方面比 Flash 更加立体、更加精巧，canvas 游戏在流畅度和跨平台方面更牛。eg：HTML5 Canvas 游戏。
2.可视化数据：数据图表话，比如:百度的 echart。
3.banner 广告：智能机时代，HTML5 技术能够在 banner 广告上发挥巨大作用，用 Canvas 实现动态的广告效果再合适不过。
4.未来=>模拟器：无论从视觉效果还是核心功能方面来说，模拟器产品可以完全由 JavaScript 来实现。
5.未来=>远程计算机控制：Canvas 可以让开发者更好地实现基于 Web 的数据传输，构建一个完美的可视化控制界面。
6.未来=>图形编辑器：Photoshop 图形编辑器将能够 100%基于 Web 实现。
7.其他可嵌入网站的内容(多用于活动页面、特效)：类似图表、音频、视频，还有许多元素能够更好地与 Web 融合，并且不需要任何插件。
8.完整的canvas 移动化应用。
二、canvas 绘图基础
2.1 Canvas 标签
2.1.1 canvas 标签语法和属性 （重点）
标签名< canvas></ canvas>，需要进行闭合的html标签。
可以设置width和height属性，属性值单位必须是px，否则忽略。
width和hegiht：默认300*150像素。
注意：
1.不要用CSS控制它的宽和高,会走出图片拉伸；
2.重新设置canvas标签的宽高属性会让画布擦除所有的内容；
3.可以给canvas画布设置背景色。
2.1.2 浏览器不兼容处理（重点）
ie9 以上才支持canvas, 其他chrome、ff、苹果浏览器等都支持；
只要浏览器兼容canvas，那么就会支持绝大部分api(个别最新 api 除外)；
移动端的兼容情况非常理想，基本上随便使用；
2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持；
如果浏览器不兼容：
1.进行友好提示
<canvas id="cavsElem">
你的浏览器不支持canvas，请升级浏览器。
</canvas>
2.使用_flash_等手段进行优雅降级
2.2 canvas 绘图上下文 context
2.2.1 Context：Canvas 的上下文、绘制环境。（重点掌握）
上下文：是所有的绘制操作 api 的入口或者集合;
Canvas 自身无法绘制任何内容，绘图是使用 JavaScript 操作的;
Context对象就是JavaScript操作Canvas的接口。使用[CanvasElement].getContext('2d')来获取2D绘图上下文;
var canvas = document.getElementById('cavsElem'); //获得画布
var ctx = canvas.getContext('2d'); //注意：2d小写，3d：webgl
2.3 基本的绘制路径（重点）
2.3.1 canvas 坐标系
从最左上角 0,0 开始。x 向右增大， y 向下增大
2.3.2 设置绘制起点(moveTo)
语法：ctx.moveTo(x, y);
解释：设置上下文绘制路径的起点。相当于移动画笔到某个位置;
参数：x,y 都是相对于 canvas盒子的最左上角。
注意：绘制线段前必须先设置起点。
2.3.3 绘制直线(lineTo)
语法：ctx.lineTo(x, y);
解释：从x,y的位置绘制一条直线到起点或者上一个线头点;
参数：x,y 线头点坐标。
2.3.4 路径的开始和闭合
开始路径：ctx.beginPath();
闭合路径：ctx.closePath();
解释：如果是绘制不同状态的线段或者形状，必须使用开始新路径的方法把不同的绘制操作隔开。闭合路径会自动把最后的线头和开始的线头连在一起。
beginPath: 核心的作用是将 不同绘制的形状进行隔离，
每次执行此方法，表示重新绘制一个路径,跟之前的绘制的墨迹可以进行分开样式设置和管理。
2.3.5 描边(stroke)
语法：ctx.stroke();
解释：根据路径绘制线。路径只是草稿，真正绘制线必须执行stroke。
三、基础语法总结
canvas 绘制的基本步骤：
第一步：获得上下文 => canvasElem.getContext('2d')；
第二步：开始路径规划 => ctx.beginPath()；
第三步：移动起始点 => ctx.moveTo(x, y)；
第四步：绘制线(矩形、圆形、图片…) => ctx.lineTo(x, y)；
第五步：闭合路径 => ctx.closePath()； ； 第六步：绘制描边 => ctx.stroke()；
示例： html 部分：
<canvas id="cavsElem"> 你的浏览器不支持canvas，请升级浏览器 </canvas>
javascript 部分：
//获得画布
var canvas = document.querySelector('#cavsElem')
var ctx = canvas.getContext('2d') //获得上下文
canvas.width = 900 //设置标签的属性宽高
canvas.height = 600 //千万不要用canvas.style.height
canvas.style.border = '1px solid #000' //绘制三角形
ctx.beginPath() //开始路径
ctx.moveTo(100, 100) //三角形，左顶点
ctx.lineTo(300, 100) //右顶点
ctx.lineTo(300, 300) //底部的点
ctx.closePath() //结束路径
ctx.stroke() //描边路径
