评论

Canvas 2d接口绘制问题踩坑总结

canvas 2d接口的一些使用问题汇总

微信不再支持之前的旧Canvas接口,都升级到了2d,导致之前绘制海报的功能无法正常使用,这边进行了修正,把过程遇到的坑记录下。主要碰到的几个问题如下:

1、迁移到新接口;

新接口采用了不同的接入方式,可以参考迁移指南:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/canvas-legacy-migration.html

这里要特别注意的是,导出Canvas到图片的时候:

  wx.canvasToTempFilePath({
    canvas: this.canvas, // 这里一定不要弄错
    success: () => {
        ...
    }
  })


2、导出图片的时候,绘制的图片是空白的

导出图片之后,发现绘制的图片是空白的,文字和矩形是正常的。是因为Canvas 2d是采用同步绘制的方式,不需要调用draw方法,也不需要等上一步绘制完,所以导出图片之前,要等待一下,确定绘制都完成。加个Timeout就行。

setTimeout(() => {
  wx.canvasToTempFilePath({
    canvas: this.canvas,
    success: () => {
        ...
    }
  })
}, 300);


3、绘制的文字、矩形被图片覆盖问题

绘制图片导出正常了,但是会出现后绘制的文字和矩形都被图片给覆盖遮住了。其实这个问题和第二个问题类似,也是因为同步绘制的关系。但是因为绘制图片需要等图片加载之后再绘制,会导致文字会先绘制。处理方式,在onload里绘制图片,绘制图片之后,再调用下一个绘制:

直接贴Taro的代码了。

最后一次编辑于  2022-06-24  
点赞 2
收藏
评论

2 个评论

  • 一面
    一面
    2022-09-12

    lz你好,如果想在一块画布上循环生成图片,存为临时文件,再清空画布再生成第二张,把第二张存为临时图片...有什么比较好的解决思路吗?直接循环drawimage的话,因为是异步函数,两次绘图会同时叠加在一起,setTimeout也有类似的问题。

    2022-09-12
    赞同
    回复 3
    • Hmlyn丶
      Hmlyn丶
      2022-10-02
      async await Promise 都用上。
      2022-10-02
      回复
    • 一条鱼
      一条鱼
      2022-12-20
      绘制之前清空画布,使用ctx.clearRect
      2022-12-20
      回复
    • 从君华
      从君华
      2023-04-12
      试试离屏
      2023-04-12
      回复
  • Cjiang
    Cjiang
    2022-06-22

    上个代码片段?

    2022-06-22
    赞同
    回复
登录 后发表内容