初学画布canvas的chapter2

文本

　　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()

——访问该快照