canvas--总结二
canvas图形绘制
- 矩形绘制
rect(x,y,w,h) 没有独立路径
strokeRect(x,y,w,h) 有独立路径，不影响别的绘制
fillRect(x,y,w,h) 有独立路径，不影响别的绘制
clearRect(x,y,w,h) 需要擦除的矩形区域
- 圆弧绘制
弧度概念
一个圆的弧度等于2π
角度弧度转化 一角度等于π/180
绘制圆弧：arc(x,y,r,startAngle,endAngle,anticlockwise);
参数：
x 圆心横坐标
y 圆心纵坐标
r 半径
startAngle 开始角度
endAngle 结束角度
anticlockwise 是否逆时针方向绘制（默认false表示顺时针，true表示逆时针）注意：在使用逆时针时，看需求是否要改变开始和结束的角度
- 绘制文本
ctx.font=“微软雅黑” 设置字体
strokeText(text,x,y,maxWidth); /描边文字 fillText(text,x,y,maxWidth);/ 填充文字
参数：
text： 要绘制的文本
x,y ： 文本绘制的坐标（文本左下角）
maxWidth： 设置文本最大宽度，可选参数
ctx.textAngle 文本水平对齐方式，相对绘制坐标来说（参数：left,center,right,start(默认),end）
ctx.direction 属性css(rtl,ltr)start和end相关
如果是ltr,start和left表现一致（ltr--从left到right）
如果是rtl,start和right表现一致（rtl--从right到left）
ctx.textBaseline 设置基线（垂直对齐方式）
top 文本的基线处于文本的正上方 并且有一段距离
middle 文本的基线处于文本的正中间
bottom 文本的基线处于文本的正下方，并有一段距离
hanging 文本的基线处于文本正上方，并且和文本粘合
alphabetic 默认值，基线处于文本的下方，并且穿过文字
ideographic和bottom相似，但是不一样//
measureText() 获取文本宽度obj.width
做动画
- 绘制图片
drawImage();
三个参数时: drawImage(img,x,y);
- img 图片对象，canvas对象，video对象
- x,y 图片绘制的左上角
五个参数时：drawImage(img,x,y,w,h);
- img 图片对象，canvas对象，video对象
- x,y 图片绘制的左上角
- w,h 图片绘制尺寸设置（图片缩放，不是截取）
九个参数时：drawImage(img,x,y,w,h,x1,y1,w1,h1);
- img 图片对象，canvas对象，video对象
- x,y 图片绘制的左上角
- w,h 图片绘制尺寸设置（图片缩放，不是截取）
- x1,y1,w1,h1 画布中的一个矩形区域
- 坐标变换
平移 移动画布的圆点
translate（x.y）; 参数表示移动目标点的坐标
缩放
scale（x,y）; 参数表示宽高的缩放比例
旋转
rotate（angle); 参数表示旋转角度
参考文档：
w3school http://www.w3school.com.cn/tags/html_ref_canvas.asp
Canvas_API https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial
