文本

  1.字体属性

  context.font = [css font property]    

    ——使用CSS规范,语法跟CSS字体速记符号一致

 ——line-height无效,并永远忽略

  Context.font = [font-style font-variant font-weight font-size font-family]

  2.水平锚点

  context.textAlign = [left | right |center | *start | end]

    ——左对齐/右对齐/居中对齐/开始/结束

  dir=”ltr/rt”

——设置文本方向从左到右/从右到左

  3.垂直锚点

  context.textBaseline = [ top | middle | alphabetic | bottom | hanging| ideographic ]

    ——文本基线位于em方框的顶端/位于em方框的正中/默认,普通的字母基线/位于em方框的底端/悬挂基线/表意基线

  4.绘制文本

context.fillText(text,x,y,maxwidth)     ——绘制填充文本
context.strokeText(text,x,y,maxwidth)   ——绘制无填充文本
context.measureText()           ——定义文本尺寸

四、内嵌图像

    context.drawImage(image,dx,dy)

    context.drawImage(image,dx,dy,dw,dh)

    context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)

      ——s代表源,d代表尺寸

五、像素处理

imageData

    getImageData(sx,sy,sw,sh)

——获取canvas矩形选区

 putImageData(ImageData,dx,dy[dirtyX,dirtyY,dirtyWidth.dirtyHeight])

      ——写入画布

createImageData(sw,sh/imagedata)

      ——初始化空白ImageData

六、混合、图案、变换等

混合:

  

context.globalCompositeOperation = ‘’;

属性:

source/destination-over——将A绘于B上/相反

source/destination –in    ——绘出A位于B的部分/相反

source/destination –out——绘出A在B之外的部分/相反

source/destination –atop    ——绘出B以及A与B重叠部分

lighter    ——为重叠区域添加颜色并变浅

copy       ——将B排除只绘出A

xor       ——将A与B重叠部分去掉

?       ——自定义合成方法

图案:

        context.createPattern(image,repetition)

repetition属性:

repeat  ——水平和垂直重复

repeat-x     ——水平重复

repeat-y     ——垂直重复

no-repeat     ——不重复

变换:

scale(x,y)——根据x,y来完成x轴和y轴的尺寸改变

rotate(angle)——根据angle调整顺时针旋转的角度

translate(x,y)——以像素为单位的x轴、y轴偏移

——3种方法混合使用,变换会以相反顺序进行

transform(m11,m12,m21,m22,dx,dy)

——通过乘法改变当前矩阵

setTransform(m11,m12,m21,m22,dx,dy)

——将新矩阵覆盖在原有矩阵上

m11——X轴方向缩放

m12——水平剪切

m21——垂直剪切

m22——Y轴方向缩放

dx——X轴位移

dy——Y轴位移

其他:

save()和retore()

save()

——创建一个快照,保存当前设置属性

retore()

——访问该快照

05-11 18:24