怎么在微信小程序中利用帆布实现一个水平,垂直居中效果 - 行业资讯

　　介绍

本篇文章为大家展示了怎么在微信小程序中利用帆布实现一个水平,垂直居中效果,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

wxml

& lt; canvas type=& # 39; 2 d # 39;, id=癿yCanvas",宽度=?00“,身高=?50“,,风格=氨尘?黄色;“,\祝辞

使用canvas2d构建画布

怎么在微信小程序中利用帆布实现一个水平,垂直居中效果

蓝色线为水平中线

红色线为垂直中线

<强>文本设置方法

<代码> fillText 方法为画布上设置文本方法,使用如下所示

ctx.fillText(& # 39;文本内容& # 39;,,x,, y)

x为横轴坐标

y为纵轴坐标

上例将文本内容设置在画布上画布的坐标位置上,跳脱网的开发思维,我们可以认为x点相对于文本有左,中,右三种布的局,y点相对于文本有上,中,下的布局,这样就很好理解文本在画布上是如何绘制了

<强>水平居中

找到x轴的中点位置,如上图,在150 px这个点上

注意x点相对于文本的位置

ctx.fillStyle =, & # 39; # aaa # 39; 　　时间=ctx.font & # 39; bold 30 px “Gill Sans Extrabold" & # 39; 　　时间=ctx.textAlign & # 39;中心# 39; 　　ctx.fillText(& # 39;文本内容& # 39;,,150,,0)

怎么在微信小程序中利用帆布实现一个水平,垂直居中效果

图示只作说明

<强>垂直居中

找到X轴的中点位置,如上图,在75 px这个点上

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

ctx.fillStyle =, & # 39; # aaa # 39; 　　时间=ctx.font & # 39; bold 30 px “Gill Sans Extrabold" & # 39; 　　时间=ctx.textBaseline & # 39;中间# 39; 　　ctx.fillText(& # 39;文本内容& # 39;,,0,75)

怎么在微信小程序中利用帆布实现一个水平,垂直居中效果

图示只作说明

<强>完美居中

ctx.fillStyle =, & # 39; # aaa # 39; 　　时间=ctx.font & # 39; bold 30 px “Gill Sans Extrabold" & # 39; 　　时间=ctx.textAlign & # 39;中心# 39; 　　时间=ctx.textBaseline & # 39;中间# 39; 　　ctx.fillText (opts.maskerTitle,左,,顶部)

上述内容就是怎么在微信小程序中利用帆布实现一个水平,垂直居中效果,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注行业资讯频道。