<template>
<view>
<view>
<canvas style="width: 355px; height: 350px;" canvas-id="myCanvas" id="myCanvas"></canvas>
</view>
<view>
<button @click="test"> 生成</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
app: undefined
}
},
onLoad(options) {
// this.test()
},
onUnload() {},
methods: {
test(){
try{
const ctx = uni.createCanvasContext('myCanvas')
let word = 'Hello World'
// ctx.font = 'italic bold 20px cursive'
ctx.setFontSize(30)
const metrics = ctx.measureText(word,(metricsWidth => {
console.log(metricsWidth)
}))
console.log(metrics.width)
ctx.fillText(word,10, 50)
// ctx.fill()
ctx.draw()
}catch(e){
console.log(e);
}
}
}
}
</script>
<style>
.book-name {
text-align: center;
}
</style> 
g***@qq.com
- 发布：2025-11-12 11:54
- 更新：2025-11-12 11:54
- 阅读：19
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： macOS Ventura 13.0
HBuilderX类型： Alpha
HBuilderX版本号： 4.86
手机系统： HarmonyOS NEXT
手机系统版本号： HarmonyOS 5.1.0
手机厂商： 华为
手机机型： nova 13
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
根据示例点击生成按钮
根据示例点击生成按钮
预期结果：
输出宽度
输出宽度
实际结果：
抛错误： [TypeError] webview.evalJSAsync(...).then is not a function
抛错误： [TypeError] webview.evalJSAsync(...).then is not a function
bug描述：
根据文档里 ctx.measureText在HarmonyOS Next要用异步的方式获取文本宽度，但是会抛错：
[TypeError] webview.evalJSAsync(...).then is not a function
