安卓下 canvas 绘制文字偶发性错乱，非常诡异 - WXOPEN Club

关键代码：

封装了一个画文字的方法如下，所有文字都是通过这个方法画出来的，我在这里打了两个 log 来记录画文字的配置：

// 画文字

const _drawText = function(text = "", x = 0, y = 0, draw = true, textIndent = 0) {

const doNoThing = undefined;

const {lineHeight, fontSize, color, bold, textAlign} = config.text;

const rowSpace = (lineHeight - fontSize) / 2;

const offsetY = -3; /** 修复文字上方的默认空隙 */

ctx.setFontSize(fontSize)

ctx.setFillStyle(color)

ctx.setTextAlign(textAlign)

console.log("text config:", `fontSize:${fontSize}`, `color: ${color}`, `textAlign:${textAlign}`)

console.log("text:", text, x + rowSpace + textIndent, y + rowSpace + offsetY)

draw ? ctx.fillText(text, x + rowSpace + textIndent, y + rowSpace + offsetY) : doNoThing;

};

__
__

表现如下：

表现正常时截图：

表现正常时配置截图：

重复绘制整个画布若干次（也有可能一进来第一次就错乱），会偶然性出现错乱：

可以看到，错乱的那一句的样式和 “–by lcl 的评论” 这一行是一样的，但是看配置的话，却不应该是这样的，出现错乱时配置截图：

经过测试：

因为这个问题目前只发现在安卓下出现，比较倾向认为这是微信小程序框架实现上的差异问题，不知道有没有人曾遇到过同样问题，还请指导一二？

我也遇到了这个问题，安卓出现的概率比较高。。。但是找不到规律

保存图片的时候，延时300ms就没有问题。

出现过这个问题，在draw的回调函数里面延迟个300毫秒能保证大部分都正常显示，如果还会有问题再加一点时间

延长生成时间…垃圾手机不能做到100ms渲染改成500之后比较好

我有遇到这样的问题,我这边出现这种问题的时候一般是绘制长串的英文或者数字,这个时候多试几次就会变得错乱,除了绘制的位置错乱,字体颜色也可能会错乱,会拿上面设置过的颜色绘制,而不是重新定义过的颜色

最近发现每次绘制前更新一下 context 好像也可以解决绘制错乱问题：

// 我的绘制方法

draw() {

// 每次创建新的ctx

const ctx = wx.createCanvasContext(id, component)

// ...

}

我也出现这个问题，有时候字体不一样，有时候颜色不一样，每次刷新出来的都不一样，正常的时候很少