微信小程序canvas绘制不完全,微信小程序图片垂直居中

　　最近要做一张刮刮卡，需要在画布中水平和垂直居中文本。

　　页面结构

　　canvas type= 2d id= my canvas width= 300 height= 150 style= background:yellow；\

　　使用canvas2d构建画布

　　蓝线是水平中线。

　　红线是垂直中线。

　　文本设置方法

　　FillText方法设置画布的文本方法，用法如下

　　Ctx.fillText(文本内容，x，y)x是横轴坐标

　　y是垂直轴坐标

　　上例中，文本内容设置在画布的坐标位置上，脱离了web的开发思路。我们可以认为X点相对于文本有左、中、右三种布局，Y点相对于文本有上、中、下三种布局，这样就可以理解文本是如何在画布上绘制的。

　　水平居中

　　如上图所示，在150像素处找到X轴的中点。

　　注意X点相对于文本的位置。

　　CTX . fill style= # AAA CTX . font= bold 30px gill sans extra bold CTX . textalign= center CTX . fill text( text content ，150，0)

　　该图示仅用于说明。

　　垂直居中

　　找到X轴的中点，如上图所示，在75px。

　　注意Y点相对于文本的位置。

　　CTX . fill style= # AAA CTX . font= bold 30px gill sans extra bold CTX . text baseline= middle CTX . fill text( text content ，0，75)

　　该图示仅用于说明。

　　完美居中

　　CTX . fill style= # AAA CTX . font= bold 30px Gill Sans extra bold CTX . textalign= center CTX . text baseline= middle CTX . fill text(opts . masker title，left，top)总结

　　以上是边肖介绍的小程序。画布实现水平和垂直居中效果。希望对你有帮助！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。