文本
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()
——访问该快照