uni-app gcanvas使用fillText不显示汉字 字母和数字可以正常显示

uni-app gcanvas使用fillText不显示汉字 字母和数字可以正常显示

操作步骤：

  • nvue中使用gcanvas的fillText添加汉字和字母

预期结果：

  • 正常显示汉字和字母

实际结果：

  • 只显示字母不显示汉字

| 开发环境         | 版本号   | 项目创建方式 |
|------------------|----------|--------------|
| Windows          | Window10 | HBuilderX    |
| HBuilderX        | 3.2.5    |              |
| 手机系统         | 版本号   | 手机厂商     |
| Android          | Android 9.0 | 小米       |
| 页面类型         |          |              |
| nvue             |          |              |
| 打包方式         |          | 云端         |

更多关于uni-app gcanvas使用fillText不显示汉字 字母和数字可以正常显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app gcanvas使用fillText不显示汉字 字母和数字可以正常显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 nvue 中使用 gcanvas 的 fillText 方法时，汉字不显示但字母数字正常，通常是由于字体文件缺失或未正确加载导致的。gcanvas 在渲染文本时依赖于系统字体，如果当前字体不支持中文，就会显示为空白。

解决方案：

  1. 加载中文字体文件
    将中文字体文件（如 .ttf）放入项目的 static 目录，在绘制前通过 addFontFace 方法加载字体：

    const ctx = gcanvas.getContext('2d');
ctx.addFontFace({
  family: 'MyFont',
  source: '/static/font.ttf' // 字体文件路径
});
ctx.font = '20px MyFont';
ctx.fillText('你好', x, y);

  2. 使用系统内置字体
    直接指定支持中文的系统字体（如 PingFang SC、Microsoft YaHei）：

    ctx.font = '20px PingFang SC';
ctx.fillText('你好', x, y);

  3. 检查字体加载时机
    确保字体加载完成后再执行绘制操作，可结合 uni.loadFontFace 提前加载：

    uni.loadFontFace({
  family: 'MyFont',
  source: 'url("/static/font.ttf")',
  success: () => {
    // 绘制文本
  }
});
回到顶部