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