您好,登錄后才能下訂單哦!
本篇文章為大家展示了怎么在微信小程序中利用canvas實現(xiàn)一個水平、垂直居中效果,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
wxml
<canvas type='2d' id="myCanvas" width="300" height="150" style="background:yellow;" \>
使用canvas2d構(gòu)建畫布
藍(lán)色線為水平中線
紅色線為垂直中線
文本設(shè)置方法
fillText
方法為canvas設(shè)置文本方法,使用如下所示
ctx.fillText('文本內(nèi)容', x, y)
x為橫軸坐標(biāo)
y為縱軸坐標(biāo)
上例將文本內(nèi)容設(shè)置在canvas畫布的坐標(biāo)位置上,跳脫web的開發(fā)思維,我們可以認(rèn)為X點相對于文本有左,中,右三種布局,Y點相對于文本有上、中、下的布局,這樣就很好理解文本在canvas上是如何繪制了
水平居中
找到X軸的中點位置,如上圖,在150px這個點上
注意X點相對于文本的位置
ctx.fillStyle = '#aaa' ctx.font = 'bold 30px "Gill Sans Extrabold"' ctx.textAlign = 'center' ctx.fillText('文本內(nèi)容', 150, 0)
圖示只作說明
垂直居中
找到X軸的中點位置,如上圖,在75px這個點上
注意Y點相對于文本的位置
ctx.fillStyle = '#aaa' ctx.font = 'bold 30px "Gill Sans Extrabold"' ctx.textBaseline = 'middle' ctx.fillText('文本內(nèi)容', 0, 75)
圖示只作說明
完美居中
ctx.fillStyle = '#aaa' ctx.font = 'bold 30px "Gill Sans Extrabold"' ctx.textAlign = 'center' ctx.textBaseline = 'middle' ctx.fillText(opts.maskerTitle, left, top)
上述內(nèi)容就是怎么在微信小程序中利用canvas實現(xiàn)一個水平、垂直居中效果,你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。