全国服务热线:4008-888-888

技术知识

手机微信小程序流程canvas完成水平、竖直垂直居

近期做1个刮刮卡,必须将文本在canvas中水平、竖直垂直居中

wxml

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

 

应用canvas2d搭建画布

蓝色线为水平中线

鲜红色线为竖直中线

文字设定方式

fillText 方式为canvas设定文字方式,应用以下所示

ctx.fillText('文字內容', x, y)

x为横轴座标

y为纵轴座标

上例将文字內容设定在canvas画布的座标部位上,跳脱web的开发设计逻辑思维,大家能够觉得X点相对文字有左,中,右3种合理布局,Y点相对文字有上、中、下的合理布局,这样就很好了解文字在canvas上是怎样绘图

水平垂直居中

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

留意X点相对文字的部位

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

图示只作表明

竖直垂直居中

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

留意Y点相对文字的部位

 

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

图示只作表明

完善垂直居中

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

总结

以上所述是网编给大伙儿详细介绍的小程序流程中canvas完成水平、竖直垂直居中实际效果,期待对大伙儿有一定的协助!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服