HTML5新增的canvas标签，通过创建画布，在画布上创建任何想要的形状，下面将canvas的API做个整理。
1.阴影
1 2 3 4
| shadowOffsetY 设置或返回阴影与形状的垂直距离 context.shadowOffsetX:阴影的横向偏移量 context.shadowColor 阴影颜色 context.shadowBlur 模糊度
|
2.画线
1 2 3 4 5 6 7 8 9 10
| lineCap 设置或返回线条的结束点样式（butt、round、square） lineJoin 设置或返回当两条线交汇时，边角的类型（bevel、round、miter） lineWidth 设置或返回当前的线条宽度 miterLimit 设置或返回最大斜接长度 moveTo(x,y) 起始点 lineTo(x,y) 下一个点 strokeStyle 边框颜色 fillStyle 填充颜色 fill() 绘制 stroke() 绘制
|
2.1 贝塞尔曲线
1 2 3 4 5 6
| 二次 quadraticCurveTo(cpx,cpy,x,y) 三次 bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
|
3.渐变
1 2 3 4
| createLinearGradient( x0, y0, x1, y1 ) 创建线性渐变 createPattern( image/canvas/video, repeat ) 在指定的方向内重复绘制指定的元素 createRadialGradient( x0, y0, r0, x1, y1, r1 ) 创建径向渐变 addColorStop( stop, color ) 规定渐变对象中的颜色和停止位置
|
4.文本
1 2 3 4 5 6
| font 设置或返回文本内容的当前字体属性（和css的font一样） textAlign 设置或返回文本内容的当前对齐方式 textBaseline 设置或返回在绘制文本时使用的当前文本基线 fillText( text, x, y ) 在画布上绘制“被填充”的文本 strokeText( text, x, y ) 在画布上绘制文本（无填充） measureText( text ) 返回包含指定文本宽度的对象（属性width获取宽度）
|
5.绘制图片
1 2 3
| drawImage( image/canvas, x, y ) drawImage( image/canvas, x, y, width, height ) drawImage( image/canvas, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight ) 在画布上绘制图像、画布或视频
|
6.绘制ImageData对象
1 2 3 4 5 6 7
| createImageData( width, height ) createImageData(imageData) 绘制ImageData对象 getImageData( x, y, width, height ) 返回ImageData对象，该对象为画布上指定的矩形复制像素数据。 putImageData( ImageData, x, y )、putImageData( imageData, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight ) 把图像数据放回画布上。 width 返回ImageData对象的宽度 height 返回ImageData对象的高度 data 返回一个对象，包含指定的ImageData对象的图像数据
|
7.全局变量
1 2
| globalAlpha 设置或返回绘图的当前alpha或透明度 0~1 globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上。
|
8.图形变换
1 2 3 4 5
| scale( x, y ) 缩放当前绘图 translate( x, y ) 重新设置画布上的(0,0)位置 rotate( angle ) 选择当前绘图，单位为“弧度”，角度转弧度公式（ degrees*Math.PI/180） transform( m11, m12, m21, m22, dx, dy ) 替换绘图的当前转换矩阵 setTransform() 将当前转换重置为单元矩阵，然后运行 transform()
|
9.包裹
1 2 3 4 5 6
| beginPath() 开始绘制 closePath() 关闭绘制 保存，恢复的方式 是典型栈操作 先进后出 save() 保存当前环境的状态 restore() 恢复之前保存过的路径状态和属性
|
10.矩形
1 2 3 4
| rect(x,y,width,height) fillRect(x,y,width,height) strokeRect(x,y,width,height) clearRect(x,y,width,height) 清除一个矩形区域
|
11.圆
1 2 3 4 5 6
| x,y:圆心位置 radius:半径 starAngle,endAngel 开始结束角度 anticlockwise:布尔值，false是默认值，顺时，true 逆时针 arc(x,y,radius,starAngle,endAngel,anticlockwise) arcTo(startx,starty,endx,endy,弧的粗细)
|
12.帧动画
1 2
| window.requestAnimationFrame() window.cancelAnimationFrame()
|
