Canvas基本绘制操作

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	· 使用异或操作对源图像与目标图像进行组合。