脚本宝典收集整理的这篇文章主要介绍了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():写回像素。

作者：shiyuan17

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

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-HTML5一步一步走――扩展图形标记(五)全部内容，希望文章能够帮你解决html5教程-HTML5一步一步走――扩展图形标记(五)所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。