nvue 下 uni-app gcanvas 组件 filltext绘制中文不显示

nvue 下 uni-app gcanvas 组件 filltext绘制中文不显示

开发环境 版本号 项目创建方式
Windows Windows 11 家庭中文版 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.65

手机系统：Android

手机系统版本号：Android 11

手机厂商：华为

手机机型：nova9

页面类型：nvue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

示例代码：
```cpp
handleFillText() {
    var ctx = this.context;
    ctx.setFontSize(20)
    ctx.fillText('你好', 20, 20)
    ctx.fillText('DCloud', 100, 100)
    ctx.draw(true)
},

操作步骤：
运行nvue实现canvas画布示例：NvueCanvasDemo，代码地址：<https://github.com/dcloudio/NvueCanvasDemo>
更改handleFillText使其绘制中文，显示不出来并且页面直接卡住

预期结果：
中文能正常显示

实际结果：
中文显示不出来，页面直接卡住，控制台没有报错信息

bug描述：
nvue通过 gcanvas 组件 实现canvas画布，绘制中文失败

更多关于nvue 下 uni-app gcanvas 组件 filltext绘制中文不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

建议别用nvue 去做画板页面，实测会卡疯，发热

更多关于nvue 下 uni-app gcanvas 组件 filltext绘制中文不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我是用live-pusher插件的直播来实现自定义样式的相机，live-pusher插件只能用nvue，业务上现在需要实现水印相机的功能，现在在nvue页面画不了水印，只能先跳转到vue的页面绘制好水印再回显回去

回复 1***@qq.com: 其实你用反了，你可以用vue 页面 做主，然后 全部透明元素，放个canvas ，然后 子窗口是nvue 渲染，上面放live-pusher 和 水印覆盖的元素样式，子窗口里面点击拍照的时候，传递给主窗口图片 和水印配置，主窗口直接通过 canvas 去合成图片，这样不就实现了

帮顶，确实不显示中文

在nvue中使用gcanvas绘制中文确实存在一些限制和注意事项。根据你的描述，问题可能出在以下几个方面：

  1. 字体设置问题：gcanvas在Android平台上默认可能不支持中文字体，需要显式指定支持中文的字体。可以尝试修改代码为：
ctx.setFont('20px sans-serif')
ctx.fillText('你好', 20, 20)
回到顶部