HTML5-深入浅出篇：
Canvas初识：
- 首先在body中开启一个画布
- 宽高最好在行间设置，设置在这里的宽高才是坐标系真正参考的位置
- 可通过样式给画布设置背景颜色等
- 画布默认原点坐标为（0，0），即画布左上角
例：
<canvas id="cvs" width="500" height="500"></canvas>
- 然后通过 js 获取到这个canvas画布的dom元素
例：
<script>
var cvs = document.querySelector('#cvs')
</script>
正课开始
一. canvas的基础使用
1. var ctx = cvs.getContext('2d') //相当于获取一个画笔（必写）
2. ctx.beginPath() //开启一个路径
3. ctx.moveTo(100,100) //笔触落笔的位置
4. ctx.lineTo(200,100) //笔触移动到的位置
5. ctx.closePath() //闭合路径（将路径的当前点连接到路径的起始点）
6. ctx.stroke() //描边（通过设置这个画的图形就会显示在页面上）
7. ctx.fill() 填充
二. 快速绘画特定形状
题外话：
正题：
1. 圆形：
ctx.arc(100, 100, 50, getRadian(0), getRadian(90),1)
//参数含义分别为：圆心坐标x、y ，半径，起始弧度，终止弧度，画笔起笔方向（0为顺时针，1为逆时针）
//其中x轴向右与右侧圆边界相交的位置为角度为0度的起点（试一试就清楚了）
2. 矩形：
- 方法一：
ctx.rect(100,100,200,100);
前两个为起始点位置，后两个分别为宽高
- 方法二：
ctx.strokeRect(100,100,200,100);
直接画一个描边的矩形; 构建路径+画
- 方法三：
ctx.fillrect(100,100,200,100);
直接画出填充的矩形
3. 画圆角矩形
ctx.moveTo(100,100)
ctx.arcTo(100, 200, 200, 200, 10) 参数 B(x，y), C(x,y), 圆角大小 (C点只提供了一个延长线的方向，没有实际的线段)
ctx.arcTo(200, 200, 200, 100, 10)
ctx.arcTo(200, 100, 100, 100, 10)
ctx.arcTo(100, 100, 100, 200, 10)
ctx.stroke()
4.待更新...
三. 图形的样式
注：更改的样式要设在描边或填充之前
注：同一个画笔下，这些样式共享
1. ctx.strokeStyle = "#666" //设置描边颜色
2. ctx.fillStyle = "#678" //设置填充颜色
3. ctx.lineWidth = 5 //线条粗细
4. ctx.lineCap = "butt" //线条末端类型 ———— butt：方形 round： 圆 square： 方形，但是增加了额外的宽/长
5. ctx.shadowBlur = '8' //描述阴影模糊程度 默认为0 越大越模糊
6. ctx.shadowColor = "red" //阴影的颜色
7. ctx.shadowOffsetX = 5 //阴影的水平偏移量
8. ctx.shadowOffsetY = 5 // 阴影的垂直偏移量
//下面这两个属性要设置在开启路径之前
9. ctx.translate(40, 40) //平移坐标系 x,y
10. ctx.rotate(Math.PI / 2) //旋转弧度 ，顺时针转90度
// 上下文状态
11. ctx.save() //保存当前样式。 设置在开启路径之前
12. ctx.restore() //恢复到之前样式，让后面的样式不受之前样式的影响。 设置在描边或填充之后
补充知识点：
var img = ctx.getImageData(x1,y1,x2,y2) //获取该范围的区域 x1 y1 代表起始点， x2 y2 代表宽高
ctx.putImageData(img,300,300) //将img区域 ，复制到300，300 的位置上
