HTML5一步一步走——扩充图形标记(五)

HTML5一步一步走——扩展图形标记(五)
绘制文字：

类似于绘制图形，首先fill然后stroke
例如：
context.fillText(text,x,y,maxwidth);

context.strokeText(text,x,y,maxwidth);

测量文字宽度：
TextWidth = context.measureText(text).width;


textBaseline指定垂直对齐方式：
context.textBaseline=[top|middle|bottom|hanging]


drawImage绘制图像：

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

参数解析：

image：所要绘制的图像。

x, y： 要绘制的图像的左上角的位置。 

width, height： 图像所应该绘制的尺寸。指定这些参数使得图像可以缩放。 

sourceX, sourceY： 图像将要被绘制的区域的左上角。这些整数参数用图像像素来度量。 

sourceWidth, sourceHeight： 图像所要绘制区域的大小，用图像像素表示。 

destX, destY ：所要绘制的图像区域的左上角的画布坐标。 

destWidth, destHeight： 图像区域所要绘制的画布大小。 

选择一部分区域贴到目标区域：
image.onload=function(){
context.drawImage(image,0,0);
context.drawImage(image,620,300,375,390,10,200,250);
}

当图形重叠时的绘制方法
context.globalCompositeOperation = '模式(source-over,source-in)'

绘制像素：

getImageData():获取图片像素，putImageData():写回像素。

查看更多 下一篇