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():写回像素。

绘制文字：
类似于绘制图形，首先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():写回像素。

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！