canvas绘图方法总结

getContext('2d') : canvas的2D绘图环境

【直线与方块】

1/fillRect(x,y,w,h) : 绘制背景方块，默认黑色

2/strokeRect(x,y,w,h) : 绘制边框方块，默认2像素，分别在l,t多加0.5边框就变成1像素了

3/fillStyle : 设置填充背景色

4/strokeStyle : 设置边框颜色

5/lineWidth : 设置边框粗细

6/lineJoin : 边界连接点样式( round为圆角，bevel为斜角 )

【路径】

1/beginPath() : 开始绘制

2/closePath() : 结束绘制，闭合路径

3/moveTo(x,y) : 移动坐标

4/lineTo(x,y) : 定义坐标点的位置

5/stroke() : 用线条连接坐标点

6/fill() : 用背景填充坐标点

7/rect(x,y,w,h) : 方块坐标连接，相当于lineTo方法的集合

8/clearRect(x,y,w,h) : 清除痕迹

9/save()和restore() : 保存和恢复路径，两者配合使用，分别放在开头和结尾位置，避免同一画布里方法公用，相当于js中的变量作用域

10/lineCap : 线条的端点样式( round为圆角，square直角，但它的高度多出为宽的一半 )

【曲线】

1/arc(x,y,r,startR,endR,false) : 绘制圆弧的方法，参数(x坐标，y坐标，半径，开始弧度，结束弧度，顺时针或逆时针，false为顺,true为逆,弧度=角度*Math.PI/180;)

2/arcTo(x1,y1,x2,y2,r) : 2组坐标加半径

3/quadraticCurveTo(dx1,dx2,x1,y1) : 1个控制点加1个坐标点，贝塞尔曲线1

4/bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1) : 2个控制点加1个坐标点,贝塞尔曲线2

【变换】

1/translate(x,y) : 偏移原点坐标

2/rotate(弧度) : 角度*Math.PI/180

3/scale(x,y) : 为1为临界点，大于则放大，小于则缩小，x和y相同为等比缩放

【图片与背景】

1/drawImage(obj,x,y) ：图片加载完后调用的方法

2/createPattern(obj,repeat) : 画布背景

3/createLinearGradient(x1,y1,x2,y2……) : 线性渐变背景

4/createRadialGradient(x1,y1,r1,x2,y2,r2……) : 放射性(径向)渐变背景

5/addColorStop(0~1,color) : 渐变点，2个或以上组成

【文本】

1/fillText(txt,x,y) : 文本颜色

2/textBaseline : 对齐方式,top,middle,bottom，默认是baseline

3/strokeText(txt,x,y) : 文本描边

4/measureText(txt).width : 文本居中方法

5/shadowOffsetX : 阴影的水平方向偏移

6/shadowOffsetY : 阴影的垂直方向偏移

7/shadowColor : 阴影颜色

8/shadowBlur : 阴影模糊半径( 高斯模糊 )

【像素点】

更新中……

【合成】

更新中……