一、问题
官方是这样解释的 ctx.fillText(string text, number x, number y, number maxWidth)的：
此API用于在在画布上绘制被填充的文本，其中，x和y分别表示文本距离左上角 x 和y坐标位置
const ctx = wx.createCanvasContext('myCanvas')ctx.setFontSize(20)ctx.fillText('Hello', 20, 20)ctx.fillText('MINA', 100, 100)ctx.draw()
好像没有什么问题，但是在开发过程中,表现却不是这样的。
如下面：
定义一个canvas， height和width设置成300px
<view class="intro"><canvas style="width: 300px; height: 300px;" canvas-id="firstCanvas"></canvas></view>
获取canvas对象，并且填充背景色为灰色，
const context = wx.createCanvasContext('firstCanvas');context.setFillStyle('#CCCCCC');//填充背景context.fillRect(0, 0, 300,300);context.setFillStyle('#000000');//字体颜色context.fillText('以字生图',0, 0);context.draw();
表现如图：明明设置在左上角x和y轴0点处开始，但是却看不到了，这是为什么呢？
很明显，Y轴偏移量错位一定是小程序的Bug.
如何解决？
经过测试我发现，fillText(text,x, y)，轴的y实际上不是指文字左上角到画布零点的距离，而是指文字的左下角到零点的距离。
所以我们只需要在原本想要设置的y轴上再加上文本的宽度就行了
const context = wx.createCanvasContext('firstCanvas');const fontWidth= context.measureText('以').width;//获取文本宽度context.setFillStyle('#CCCCCC');context.fillRect(0, 0, 200, 200);context.setFillStyle('#000000');context.fillText('以字生图', 0, 0 + fontWidth);//本来设置的0，现在需要加上fontWidthcontext.draw();
如图：
自己写的小程序，支持文字生成图片，多行操作，字体选择哦；
如果觉得《微信小程序 canvas使用fillText()文字错位问题解决方案》对你有帮助，请点赞、收藏，并留下你的观点哦！
