[已解决]微信小程序 canvas 文字样式错乱问题

在微信小程序中使用canvas绘制海报的时候，发现有多种不同的样式文字时，

保存canvas内容为图片，出现各种文字样式错乱。

------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------

多次测试后发现，wx.canvasToTempFilePath()这个方法不只需要在ctx.draw回调中执行，还需要setTimeout

一定时间才能保证保存的图片是自己程序预期的样子。

回调写法：

ctx.draw(false, () => {

setTimeout(() => {

wx.canvasToTempFilePath();

}, 100)

})

async、await 写法：

await new Promise((resolve, reject) => ctx.draw(false, () => setTimeout(() => resolve(), 100)));

wx.canvasToTempFilePath();

预期图片：

意外金喜的博客：http://blog.csdn.net/zzwwjjdj1

更多小程序文章：http://blog.csdn.net/zzwwjjdj1/article/details/79351547

[已解决]微信小程序 canvas 文字样式错乱问题相关推荐

微信小程序设置文字样式white-space失效
微信小程序中的换行今天遇到了一个多段文字展示的效果,试了很多种方法设置样式等都实现不了,最后发现,在微信小程序中,不能使用view为文字做换行等操作 HTML中的换行可以直接使用标签,但是微信小程 ...
微信小程序 canvas 文字自动换行
Page({drawCanvas: function(ctx) {// 地址ctx.setFontSize(14)ctx.setFillStyle('#9E7240')ctx.textAlign=&q ...
c语言小程序跑马灯,微信小程序实现文字跑马灯效果
本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下 wxml 1 显示完后再显示 Box"> 2 出现白边后即显示 Box"> {{tex ...
微信小程序-canvas绘制文字实现自动换行
微信小程序-canvas绘制文字实现自动换行在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为我们只能设置文本的最大宽度,这就产生 ...
微信 html 字体自动换行,详解微信小程序-canvas绘制文字实现自动换行
在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvascontext.filltext参数为我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...
微信小程序 canvas描绘文字图片生成图片并保存到本地
在实现这个功能时,遇到以下的问题: 1. canvas绘制文字的换行问题: 如果文字的长度大于你所定的宽度的话,文字会超出你所定宽度: 小程序的CanvasContext.fillText有一个max ...
解决微信小程序的video元素层级太高无法遮盖问题
解决微信小程序的video元素层级太高无法遮盖和show-play-btn属性失效问题今天在项目中遇到了这个问题,需要在微信小程序中用视频作为背景,微信开发者工具中模拟的没问题,真机调试就发现vid ...
解决微信小程序银行卡号输入转换格式
解决微信小程序银行卡号输入转换格式问题 ps:2017-02-17 19:44 (发现新bug,暂已解决优化中) 新手第一次写博客,请多多见谅! (感觉会有更好的办法,希望有大牛能对我指点指点) 输入 ...
php小程序中的页面如何换行,解决微信小程序scroll-view换行问题
今天在写小程序的时候使用了scroll-view,但是发现在scroll-view中一行文字不能换行,代码如下: asdhadjhkajshdkjahsdkjasdajsdhkajsdkajsdkaj ...

[已解决]微信小程序 canvas 文字样式错乱问题

意外金喜的博客：http://blog.csdn.net/zzwwjjdj1

[已解决]微信小程序 canvas 文字样式错乱问题相关推荐

最新文章

热门文章