怎么在微信小程序中利用canvas实现一个水平、垂直居中效果-创新互联

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

鄂伦春网站建设公司创新互联,鄂伦春网站设计制作,有大型网站制作公司丰富经验。已为鄂伦春1000多家提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱,请找那个售后服务好的鄂伦春做网站的公司定做!

wxml


<canvas type='2d' id="myCanvas" width="300" height="150"  style="background:yellow;" \>

使用canvas2d构建画布

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

蓝色线为水平中线

红色线为垂直中线

文本设置方法

fillText 方法为canvas设置文本方法,使用如下所示

ctx.fillText('文本内容', x, y)

x为横轴坐标

y为纵轴坐标

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

水平居中

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

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

ctx.fillStyle = '#aaa'
ctx.font = 'bold 30px "Gill Sans Extrabold"'
ctx.textAlign = 'center'
ctx.fillText('文本内容', 150, 0)

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

图示只作说明

垂直居中

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

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

ctx.fillStyle = '#aaa'
ctx.font = 'bold 30px "Gill Sans Extrabold"'
ctx.textBaseline = 'middle'
ctx.fillText('文本内容', 0, 75)

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

图示只作说明

完美居中

ctx.fillStyle = '#aaa'
ctx.font = 'bold 30px "Gill Sans Extrabold"'
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillText(opts.maskerTitle, left, top)

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

网站栏目:怎么在微信小程序中利用canvas实现一个水平、垂直居中效果-创新互联
当前路径:/article15/dsejgi.html

成都网站建设公司_创新互联,为您提供小程序开发移动网站建设静态网站手机网站建设企业网站制作定制开发

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

外贸网站建设