Canvas技术

##### 矢量图形

- 文本：

textAlign　　　　　　　　水平对齐方式

textBaseline　　　　　　垂直对齐方式

context.fillText(*text,x,y); 坐标指的是左下角的坐标

------

##### 几何图形：

- 圆：

arc( x , y , r ,start , stop, true / false ) true是逆时针，false是顺时针。默认顺时针

然后 stroke 一下

- 渐变：

$createLinearGradient(x,y,x1,y1)$ - 创建线条渐变，传参为起始点和终止点

$createRadialGradient(*x,y,r,x1,y1,r1*)$ - 创建一个径向/圆渐变

$gradient*.addColorStop(*stop*,*color)$

阴影：

*context*.shadowOffsetX>0向右

*context*.shadowOffsetY>0向下

##### 图像：

1.负片特效：rgb全部变成255-x，a不变

2.灰度特效：rgb三值平均，a不变

3.黑白特效：先灰度处理，x大于177设为255，否则设为0

4.浮雕特效：先灰度处理，