微信小程序，canvas使用fillText()文字错位问题解决方案

一、问题

官方是这样解释的 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，现在需要加上fontWidth
    context.draw();

如图：

自己写的小程序，支持文字生成图片，多行操作，字体选择哦；