出现过这个问题,在draw的回调函数里面延迟个300毫秒能保证大部分都正常显示,如果还会有问题再加一点时间
安卓下 canvas 绘制文字偶发性错乱,非常诡异关键代码: 封装了一个画文字的方法如下,所有文字都是通过这个方法画出来的,我在这里打了两个 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 的评论” 这一行是一样的,但是看配置的话,却不应该是这样的,出现错乱时配置截图: [图片] 经过测试: 这个问题只在安卓下出现(测过魅蓝、小米均出现),在 苹果下不会出现(测过 iPhone S, iphone x) 不是每次必现,频繁重新绘制和文字多的时候出现概率比较大(由于问题比较诡异,还没找到具体的规律) 尝试过用 wx:if 在绘制结束后销毁画布,问题还是会重现 因为这个问题目前只发现在安卓下出现,比较倾向认为这是微信小程序框架实现上的差异问题,不知道有没有人曾遇到过同样问题,还请指导一二?
2018-12-03样式错乱过了几个小时之后自动好了,问过几个朋友,他们说遇到过两次,重新提交代码就好了,不用更改。 还有一种猜测是代码丢到了垃圾服务器,具体是啥也不清楚,不过样式之类的是过了几个小时之后没发版自动就好了。
小程序上传之后跟体验版关掉调试不一样在体验版,关掉调试用正式的域名,都是好的,但是上传了之后本来应该显示的一些文案不见了。 不知道各位有没有过这种情况
2018-11-17楼主问题解决了吗,碰到同样问题+1
canvas文字绘制错位,字体大小,颜色等不正常[图片] 安卓上出现几率特别大 ios上没出现过 注:这张图片除了红色背景,其他元素都是绘制的 最后draw一次,中途一次都没有draw return new Promise((resolve) => { ctx.draw(true, () => { resolve(res) }) })
2018-08-20同遇到这个问题,小程序开发最新版本,clip失效
急!!! canvas.clip() 无效的问题。。。下面这段代码有问题吗?为什么不能裁剪出一个圆出来。。。 [代码]context.save();[代码][代码]context.beginPath();[代码][代码]context.arc(50, 50, 50, 0, 2 * Math.PI);[代码][代码]context.closePath();[代码][代码]// context.fill();[代码][代码]context.clip();[代码][代码]context.fillStyle = [代码][代码]"#900000"[代码][代码];[代码][代码]context.fillRect(0, 0, 200, 200);[代码][代码]context.restore();[代码][代码]context.draw([代码][代码]false[代码][代码]);[代码]如果把注释去掉就可以?为什么 clip 之前需要先 fill 一次呢? 这个是完完整整复制的 clip 的示例中的代码,仅仅是把示例中的 drawImage 换成了 fillRect 就不行了。真的对你们的 API 很失望!!! 另外,真机是OK的~
2018-08-10