微信小程序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渲染到页面上才有效。 字体文件返回的 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 许可协议。转载请注明来自 闲勤记上一篇作为前端的你知道OpenJS基金会吗?下一篇没有了