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

小鱼儿 2022-04-13 04:52 825阅读 0赞

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

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

\------------------------------------------------------------------------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6d3dqamRqMQ_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6d3dqamRqMQ_size_16_color_FFFFFF_t_70 1][]

\---------------------------------------------------------------------------------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6d3dqamRqMQ_size_16_color_FFFFFF_t_70 2][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6d3dqamRqMQ_size_16_color_FFFFFF_t_70 3][]

多次测试后发现，**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();

**预期图片：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6d3dqamRqMQ_size_16_color_FFFFFF_t_70 4][]

## [意外金喜的博客：http://blog.csdn.net/zzwwjjdj1][http_blog.csdn.net_zzwwjjdj1] ##

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6d3dqamRqMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181127154559652.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6d3dqamRqMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6d3dqamRqMQ_size_16_color_FFFFFF_t_70 1]: /images/20220413/b473d5e2bc144825b8170a97e434c6fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6d3dqamRqMQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20181127154620799.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6d3dqamRqMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6d3dqamRqMQ_size_16_color_FFFFFF_t_70 3]: /images/20220413/6c724bc070cf4bf6bb2149cac4042204.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6d3dqamRqMQ_size_16_color_FFFFFF_t_70 4]: /images/20220413/67ce0d9867894006859ef391de996d78.png
[http_blog.csdn.net_zzwwjjdj1]: http://blog.csdn.net/zzwwjjdj1
[http_blog.csdn.net_zzwwjjdj1_article_details_79351547]: http://blog.csdn.net/zzwwjjdj1/article/details/79351547