canvas简介
什么是canvas
canvas是一个html标签，但是给js提供了接口，通过js代码可以在canvas元素上画图
canvas的应用
游戏
炫酷效果、banner
报表，可视化数据
地图
图形编辑器、模拟器
canvas 基础
canvas 元素
属性
width
height
方法
getContext() 获取绘图环境 参数2d,webgl
绘图环境2d
坐标 x左标 y坐标
原点 左上角
Canvas 基本会话
路径开始和闭合
beginPath() 开启新的路径(状态) 并且结束前面的路径
closePath() 结束当前路径 并且使当前路径闭合
线
moveTo(x, y) 起始点坐标
lineTo(x, y) 绘制直线（接着上一个点）
快速矩形工具
rect(x, y, w, h) 绘制矩形的路径
strokeRect(x,y,w,h) 绘制描边的矩形
fillStyle(x,y,w,h) 绘制的填充的矩形
clearRect(x,y,w,h) 清除矩形（绘制的矩形区域内的内容将被擦除）
画圆(弧)
arc(x,y,r,start, end, true/false)
最后一个参数是表示 顺时针(false)还是逆时针(true) 默认false
文字
font 属性 设置大小和字体
textAlign 属性 文字的水平对齐方式 start(默认)/end/left/right/center
textBaseLine 属性 文字的垂直对齐方式 alphabetic(默认)/top/bottom/middle
fillText(text, x, y) 填充文字
strokeText(text, x, y) 描边文字
measureText(text) 返回改文本在画布中所占的宽度
描边
stroke() 填充当前路径
strokeStyle 属性 设置描边颜色
lineWidth 属性 设置描边线条宽度
填充
fill() 填充当前的路径
fillStyle 属性 设置填充的颜色
注意： 非0环绕的算法
清除画布
使用 clearRect()
重新设置 canvas的宽度canvas.width=canvas.width
作业
代码 1 遍 （01.html除外）
整理笔记（博客）
使用循环，画10行10列表格
画画板： 拖动鼠标，在canvas上划线
饼状图(把文字显示在上面)
附录 Canvas 案例
http://unclealan.cn/my/demos/
http://echarts.baidu.com/examples.html
