小程序canvas导入字体

发布时间 2023-04-06 15:13:49作者: 木人子韦一日尘

在需要使用自定义字体的页面中,在canvas绘制之前加入以下代码:

wx.loadFontFace({
  family: '自定义字体名称',
  source: 'url("字体文件的路径")',
  scopes: ['webview', 'native'],//由于canvas是原生组件,所以需要加上native,否则无效

  success: function () {
    // 在这里进行canvas绘制
  }
})

 

在canvas中使用自定义字体

ctx.setFontSize(30) // 设置字体大小
ctx.font = '自定义字体名称' // 设置字体名称,与loadFontFace中的family保持一致
ctx.fillText('导入自定义字体', 50, 50)

 

注意:导入自定义字体需要网络请求,如果字体文件比较大或者网络不好,可能会导致字体加载失败或者造成卡顿。建议使用小字体文件,并且优化网络请求。