canvas

getContext：在使用canvas元素上绘图，需要先调用canvas的getContext方法，并传入上文的名称，比如：2d。取得绘图上下文对象的引用，所有的绘图都是应用这个对象的方法。

 

toDataURL：使用这个canvas元素的方法，可以导出在canvas元素上绘制的图像。这个方法接受一个参数，即图像的MIME类型格式，比如：image/png。取得的是一个url，直接给图像元素的src设置这个值就可以了。

 

fillStyle：这个绘图上下文对象的方法，设置接下来绘图的填充颜色，直接赋值颜色就可以了。接受字符串，可以是rgba，颜色名，十六进制码，rbg，渐变对象，模式对象等等。

 

strokeStyle：这个绘图上下文对象的方法，设置接下来绘图的描边颜色。

 

绘制矩形：

 

这三个方法都接受四个参数：矩形的x坐标，矩形的y坐标，矩形的宽度和矩形的高度。单位都是像素。这些方法都是绘图上下文对象的方法。

 

fillRect：在画布上绘制的矩形会填充指定的颜色。填充的颜色通过fillStyle属性指定。

 

strokeRect：在画布上绘制的矩形会使用指定的颜色描边，描边颜色通过strokeStyle属性指定。

 

clearReact：这个方法用于清除画布上指定的矩形区域。将某一块区域清除变透明。

 

 

绘制路径：

 

绘制路径，必须先调用绘图上下文对象的beginPath方法。以下方法都是绘图上下文对象的方法。

 

arc（x，y，radius，startAngle，endAngle，conterclockwise）：以x，y为圆心画一个弧线，弧线半径是radius，起始和结束角度分别为startAngle和endAngle（这两个值用Math.PI计算，也就是3.1415926。1个这个值就是半个圆，2个就是一个圆）。最后一个值表示是否有逆时针表示，false是顺时针。

 

arcTo(x1, y1, x2, y2, radius): 画一条弧线，经过x1，y1以radius为半径到x2，y2为止。

 

bezierCurveTo(c1x, c1y, c2x, c2y, x, y): 画一条曲线，到x，y坐标为止，以c1x, c1y和c2x, c2y坐标作为控制点。

 

lineTo(x，y): 以游标开始画一条直线，以x，y坐标为止。

 

moveTo(x, y): 设置游标的位置在x，y位置上，不画线。

 

quadraticCurveTo(cx, cy, x, y): 从上一点开始画一条二次曲线，到x，y坐标为止，并且以cx，cy坐标作为控制点。

 

rect(x, y, width, height): 从点x，y开始绘制一个矩形，并且宽和高分别设置成width和height。

 

在画完路径以后有几种选择：

 

以下都是绘图上下文对象的方法

closePath： 绘制一条连接到路径起点的线条。

 

fill：用fillStyle填充它。

 

stroke：使用strokeStyle来进行描边。

 

clip： 在路径上创建一个剪切区域。

 

 

绘制文本：

 

以下都是绘图上下文对象的方法

 

fillText(要绘制的文本字符串，x坐标，y坐标， 可选的最大像素宽度)： 这个属性绘制的是平时页面的字体。颜色使用的是fillStyle属性。

 

strokeText(要绘制的文本字符串，x坐标，y坐标， 可选的最大像素宽度)：这个属性绘制的是一个空心的文字。描边的颜色使用的是stokeStyle属性。

 

这些方法的其它样式是由这几个绘图上下文对象的属性控制：

 

font：表示文本样式，大小及字体。用css指定字体的格式来指定。如：’10px Arial’。这个属性必须指定字体。

 

textAlign: 表示文本对齐方式，可能的值有start，end，center。

 

textBaseline: 表示文本的基线，可能的值有top，hanging，middle，alphabetic，ideographic，bottom。

 

 

变换：

 

以下都是绘图上下文对象的方法

 

rotate(angle): 围绕原点旋转图形angle弧度。

 

scale(scaleX, scaleY): 缩放图像，在x方向乘以scaleX, 在y方向乘以scaleY。

 

translate(x, y): 将原点移动到x，y坐标上。执行这个方法以后，0, 0坐标表示的是原来x，y表示的坐标。

save()：调用这个方法将之前设置的内容都进行一个保存。

 

restore()：调用这个方法返回上次保存的状态。

 

 

绘制图像：

 

以下都是绘图上下文对象的方法

 

drawImage(图片，x坐标，y坐标，可选宽度，可选高度)：当直接插入某一个图片时调用传入的参数。

 

drawImage(图片，图片的x坐标开始，图片的y坐标开始，截取图片的宽度，截取图片的高度，图片放置的x坐标，图片放置的y坐标，图片的宽度，图片的高度)：当截取某一个图片的一部分时调用传入的参数。

 

 

阴影：

 

以下都是绘图上下文对象的方法，这些属性直接赋值就可以了。

 

shadowColor：用css颜色格式表示阴影颜色。

 

shadowOffsetX：形状或路径x轴方向的阴影偏移量。

 

shadowOffsetY：形状或者路径y轴方向的阴影偏移量。

 

shadowBlur：模糊的像素数。

 

 

渐变：

 

以下都是绘图上下文对象的方法，在调用以下方法后，用返回的实例的addColorStop(位置’1是终点’，颜色)来控制颜色。

 

createLinearGradient(起点x坐标，起点y坐标，终点x坐标，终点y坐标): 调用这个方法后就会创建一个指定大小的线性渐变。 创建的渐变是整个canvas元素的，也就是说，只要在两个x中间的位置都会应用这个渐变。

 

createRadialGradient(起点圆的x坐标，起点圆的y坐标，起点圆半径，终点圆的x坐标，终点圆的y坐标，终点圆的半径)：调用这个方法后会创建一个放射渐变，类似于一个同心圆的颜色渐变实例。

 

 

 

 

模式：

 

以下都是绘图上下文对象的方法

 

createPattern(重复的图像，如何重复的字符串)：这个方法返回的是一个可以重复填充或者描边的重复样式，将返回的值直接赋值给fillStyle或者strokeStyle就可以是让接下来的画图用这个内容填充或者描边。第一个值可以是一个img元素，video元素或者是另外一个canvas元素。第二个值可以是’repeat’，’repeat-x’，’repeat-y’以及’no-repeat’。

 

 

使用图像数据：

 

以下都是绘图上下文对象的方法

 

getImageData(x坐标，y坐标，获取的宽度，获取的高度)：这个方法返回的对象有三个属性，width、height、data。data是一个数组，其中保存着图像中每一个像素的数据，每一个像素用四个元素来保存，分别是红、绿、蓝、透明度。第一个像素的数据就保存在数组的0到3的元素中。可以通过循环数组，然后给每个像素的红、绿、蓝赋值它们的平均值，就可以达到灰阶过滤器的效果。

 

putImageData(getImageData返回的对象，x坐标，y坐标)：通过这个方法可以将过滤过的图片数据绘制到canvas元素上去。

 

 

合成：

 

以下都是绘图上下文对象的属性

 

globalAlpha: 这个属性用于指定接下来绘制的所有的透明度。值是一个介于0-1之间的数，可以是0，也可以是1。

 

globalCompositeOperation：这个属性的值是一个字符串，用于表示后绘制的图形与先绘制的图形怎样结合。它的值可以是这些：

source-over	默认。在目标图像上显示源图像。
source-atop	在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in	在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
source-out	在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
destination-over	在源图像上方显示目标图像。
destination-atop	在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
destination-in	在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
destination-out	在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
lighter	显示源图像 + 目标图像。
copy	显示源图像。忽略目标图像。
xor	使用异或操作对源图像与目标图像进行组合。