微信小程序canvas实现文字居中

Canvas 2D

onLoad: function () { // 通过 SelectorQuery 获取 Canvas 节点 wx.createSelectorQuery() .select('#canvas') .fields({ node: true, size: true, }) .exec(this.init.bind(this)) }, init(res) { const width = wx.getSystemInfoSync().screenWidth // 获取设备宽度 const height = wx.getSystemInfoSync().screenHeight // 获取设备高度 const canvas = res[0].node const ctx = canvas.getContext('2d') const dpr = wx.getSystemInfoSync().pixelRatio canvas.width = width * dpr canvas.height = height * dpr ctx.scale(dpr, dpr) ctx.font ='33px 微软雅黑'; const str = `文字居中` // 需要绘制的文字 ctx.fillStyle = '#000' ctx.font ='33px 微软雅黑'; ctx.fillText(str,(width - ctx.measureText(str).width) * 0.5 , 50); // 绘制文字 }