Canvas绘制线条中常见的属性和方法
属性（方法） | 说明 |
linwWidth | 定义线条的宽度，属性值为整数，默认是1，默认单位是px |
lineCap | 定义线条开始和结尾处的线帽样式，属性值：butt(默认值，无线帽)、round(圆形线帽)、square（正方形线帽） |
lineJoin | 定义两条线交接处的样式,属性值：miter（默认值，尖角）、round(圆角)、bevel（斜角） |
setLineDash(array) | 定义线条的虚实样式,array是数组，如：[5,2]表示“5px实线 2px空白”重复拼接组合而成的线条 |
Canvas文本操作
属性（方法） | 说明 |
fillText() | 绘制填充文本 |
strokeText() | 绘制描边文本 |
measureText() | 获取文本的长度 |
font | 定义文本字体样式（大小、粗细等） |
textAlign | 定义文本水平对齐方式，属性：start、end、left、right、center |
textBaseline | 定义文本垂直对齐方式，属性：top、middle、bottom、alphabetic |
fillStyle | 定义画笔“填充”路径的颜色 |
strokeStyle | 定义画笔“描边”路径的颜色 |
(1)、fillStyle与fillText()结合使用，绘制“填充”文本；
(2)、strokeStyle与strokeText()用于描边文本；
(3)、正真在绘制文本的只有fillText()和strokeText()两个方法。
Canvas图片操作
可以把图片导入canvas中进行平铺、切割、像素处理等各种操作，canvas提供了drawImage（）方法来处理图片，三种调用的方式：
drawImage(image,dx,dy)
drawImage(image,dx,dy,dw,dh)
drawImage(image.sx,sy,sw,sh,dx,dy,dw,dh)
dx:表示图片左上角的横坐标；
dy:表示图片左上角的纵坐标；
dw:表示图片的宽度；
dh:表示图片的高度；
其中的 sx、sy、sw、sh表示原图像需要截取的范围。
createPattern()定义图片的平铺方式
但是和fiilReact()配合使用，语法：
var pattern = ctx.createPattern(image,type);
ctx.fillStyle = pattern;
ctx.fillRact()
type有四个值：
1、no-repeat，不平铺，只显示一次
2、repeat-x，水平方向垂直
3、repeat-y，垂直方向垂直
4、repeat，默认水平和垂直方向平铺
切割图片
使用clip()方法来切割图canvas绘制的图片，
1、先绘制基本图形
2、使用clip()方法来切割已经绘制好了的图形
3、绘制图片
canvas变形操作
如位移、缩放、旋转和倾斜等。
方法 | 说明 |
translate() | 平移，图形沿着x或者y轴移动不会改变图形的大小。ctx.translate(x,y) |
scale() | 缩放，ctx.scale(x,y),x表示在水平方向的缩放倍数，y表示图形在垂直方向的缩放倍数。scale在改变图形的大小外还会改变其他的属性如lineWidth、左上角的坐标。 |
rotate() | 旋转，ctx.rotate(angle) |
transform()、setTransform() | 变换矩阵,ctx.transform(a,b,c,d,e,f),a表示水平缩放绘图，b水平倾斜绘图,c垂直倾斜绘图，d垂直缩放绘图，e水平移动绘图，f垂直移动绘图 |
clearRect() | 清空canvas（整个画布）,ctx.clearRect(0,0,canvas.width,canvas.height) |
canvas图片像素操作
使用getImageData()方法获取一张图片的像素数据，语法：
var imgData = ctx.getImageData(x,y,width,height);
var data = imgData.data;
x,y表示所选图片区域的坐标，width和height表示所选图片的宽度和高度。getImageData()方法返回一个canvasPixelArray对象，再使用一个变量来存储该对象，canvasPixelArray对象的data属性表示图片像素数据的数组，每四个数存储这1个像素的rgba颜色值。
putImageData()方法输出一张图片的像素数据，语法：
ctx.putImageData(image,x,y)
//其中的image表示重新绘制的图形，x,y表示重新绘制图形的左上角坐标。
createImageData(),在画布中创建一个区域来进行像素操作。
ctx.createImageData(sw,sh) //方式1
ctx.createImageData(imageData) // 方式2
方式1接收两个参数，sw和sh表示要创建区域的宽度和高度
方式2接收一个像素对象，表示要创建的区域的宽度和告诉与像素对象的宽高相等。
getImageData()和putImageData()配合使用就是对一张图片进行像素操作，createImageData()和putImageData()配合使用就是对一个区域进行像素操作
Canvas渐变和阴影
语法：
var gnt = ctx.createLineGradient(x1,y1,x2,y2);
gnt.addColorStop(value1,color1);
gnt.addColorStop(value2,color2);
ctx.fillStyle = gnt;
ctx.fill();
value表示渐变位置的偏移量，取值范围[0,1]之间任意值，value1是开始渐变的位置，color则表示渐变颜色(可以取人一颜色值)
fill()可以替换为fillText()或者fillRect()，
Canvas路径
Canvas操作路径的方法：
方法 | 说明 |
beginPath() | 开始新的路径 |
closePath() | 关闭当前的路径 |
isPointPath() | 判断一点是否存在于当前的路径 |
Canvas是基于“状态”类来绘制图形，每一个绘制（stroke()或者fill()），Canvas都会检测整个程序定义的所有状态（包括strokeStyle、fillStyle、lineWidth等）。当抢的状态值，没有被改变时，Canvas会一直使用当前的值；当状态值被修改时，则有两种情况：
1、如果使用beginPath()开始新的路径，那么不同路径就会使用不同的值；
2、不使用beginPath()开始新的路径，那么后面的值就会覆盖前面的值。
其中的“closePath()”关闭路径指的是同一个路径的起点和终点连接，形成一个封闭的图形。
“beginPath()”结束上一个路径开始下一个路径。
Canvas状态
Canvas提供了save()和restore()两个方法来操作状态，一般情况下会配合使用。
状态属性的改变：在状态改变之前使用save()方法来保存，之后使用restore()方法来恢复。
状态属性包括：
1、填充：fillStyle
2、描边: strokeStyle
3、线条：lineCap、lineJoin、lineWidth、miterLimit
4、文本：font、textAlign、textBaseline
5、阴影：shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY
6、全局属性：globalAlpha、globalCompositeOperation
Canvas 对象方法
方法 | 说明 |
getContext(“2d”) | 获取Canvas 2D上下文环境对象 |
toDataURL() | 获取Canvas对象产生的位图的字符串 |
使用toDataURL()方法来把画布保存为一张图片。语法：
canvas.toDataURL(type)
type是可选参数，表示输出MIME类型，type省略时，默认使用image/png类型。
globalAlpha属性
定义了Canvas环境的透明度。
canvas.globalAlpha = 数值 // 取值范围[0,1]
值 | 描述 |
source-over | 默认。在目标图像上显示源图像。 |
source-atop | 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。 |
source-in | 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。 |
source-out | 在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。 |
destination-over | 在源图像上方显示目标图像。 |
destination-atop | 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。 |
destination-in | 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。 |
destination-out | 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。 |
lighter | 显示源图像 + 目标图像。 |
copy | 显示源图像。忽略目标图像。 |
xor | · 使用异或操作对源图像与目标图像进行组合。 |