微信小程序canvas踩坑记录
前段时间小程序项目中花了不少时间在canvas上,碰到了不少坑。
在此记录一下比较大的两个。
- 自定义字体
- 多canvas并存
先说自定义字体,小程序提供了wx.loadFontFace()用加载自定义字体,同时从基础库2.7.0起开始支持的新版Canvas2D接口和web一致。 也就说小程序canvas可以愉快的使用和浏览器一致的方法来绘字体。
然而使用过程中却没这么顺利。
首先wx.loadFontFace()要求字体资源符合浏览器同源策略并且返回正确的contet-type。
后端小伙伴配置好后,小程序页面可以正常使用就自定义字体,但是ctx.font = "48px YOUFACE"依然无效。
一番折腾下来发现
- 微信开发者工具似乎不支持自定义字体。
- 在真机中必须待wx.loadFontFace()加载完字体后,再将canvas渲染到页面上才有效。
- 字体文件返回的 contet-type 参考 font,格式不正确时会解析失败
- 字体链接必须是https(ios不支持http)
- 字体链接必须是同源下的,或开启了cors支持,小程序的域名是servicewechat.com
- 工具里提示 Faild to load font可以忽略
- '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对象
文章作者:xianqin@qrmbl.com
文章链接:https://xianqin.site/detail/11/微信小程序canvas踩坑记录
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 闲勤记