微信小程序canvas踩坑记录

  • 发表于2022-02-23

前段时间小程序项目中花了不少时间在canvas上,碰到了不少坑。
在此记录一下比较大的两个。

  • 自定义字体
  • 多canvas并存

先说自定义字体,小程序提供了wx.loadFontFace()用加载自定义字体,同时从基础库2.7.0起开始支持的新版Canvas2D接口和web一致。 也就说小程序canvas可以愉快的使用和浏览器一致的方法来绘字体。

然而使用过程中却没这么顺利。

首先wx.loadFontFace()要求字体资源符合浏览器同源策略并且返回正确的contet-type。
后端小伙伴配置好后,小程序页面可以正常使用就自定义字体,但是ctx.font = "48px YOUFACE"依然无效。
一番折腾下来发现

  • 微信开发者工具似乎不支持自定义字体。
  • 在真机中必须待wx.loadFontFace()加载完字体后,再将canvas渲染到页面上才有效。
  1. 字体文件返回的 contet-type 参考 font,格式不正确时会解析失败
  2. 字体链接必须是https(ios不支持http)
  3. 字体链接必须是同源下的,或开启了cors支持,小程序的域名是servicewechat.com
  4. 工具里提示 Faild to load font可以忽略
  5. '2.10.0' 以前仅在调用页面生效。

然后是多canvas并存

js
 #在获取canvas时,偷懒直从官方文档上Ctrl+CV了demo代码,并改成如下代码  
 const query = wx.createSelectorQuery()
    query.select('#mainCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const mainCanvas = res[0].node
        const mainCtx = canvas.getContext('2d')
        ...
      })
    query.select('#subCanvs')
      .fields({ node: true, size: true })
      .exec((res) => {
        const subCanvas = res[0].node
        const subCtx = canvas.getContext('2d')
        ...
      })
 #于是sub的内容绘到main上了,一度怀疑不能多个canvas并存。
 #正解是使用 query.selectAll, 或者创建两个query对象