相关平台
H5
浏览器版本: Chrome 122.0.6261.129 (Official Build) (arm64)
使用框架: React
复现步骤
const canvas = Taro.createCanvasContext('measureText');
canvas.font = ${fontSize}px ${fontFamily}
;
const metrics = canvas.measureText(text);
期望结果
正确调用canvas.measureText函数
实际结果
提示measureText不是一个函数
环境信息
👽 Taro v3.6.24
Taro CLI 3.6.24 environment info:
System:
OS: macOS 14.4
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
Yarn: 1.22.19 - ~/.yarn/bin/yarn
npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
npmPackages:
@tarojs/cli: 3.6.24 => 3.6.24
@tarojs/components: 3.6.24 => 3.6.24
@tarojs/helper: 3.6.24 => 3.6.24
@tarojs/plugin-framework-react: 3.6.24 => 3.6.24
@tarojs/plugin-html: 3.6.24 => 3.6.24
@tarojs/plugin-platform-alipay: 3.6.24 => 3.6.24
@tarojs/plugin-platform-h5: 3.6.24 => 3.6.24
@tarojs/plugin-platform-jd: 3.6.24 => 3.6.24
@tarojs/plugin-platform-qq: 3.6.24 => 3.6.24
@tarojs/plugin-platform-swan: 3.6.24 => 3.6.24
@tarojs/plugin-platform-tt: 3.6.24 => 3.6.24
@tarojs/plugin-platform-weapp: 3.6.24 => 3.6.24
@tarojs/plugin-react-devtools: 3.6.24 => 3.6.24
@tarojs/react: 3.6.24 => 3.6.24
@tarojs/runtime: 3.6.24 => 3.6.24
@tarojs/shared: 3.6.24 => 3.6.24
@tarojs/taro: 3.6.24 => 3.6.24
@tarojs/taro-loader: 3.6.24 => 3.6.24
@tarojs/webpack5-runner: 3.6.24 => 3.6.24
babel-preset-taro: 3.6.24 => 3.6.24
eslint-config-taro: 3.6.24 => 3.6.24
react: ^18.0.0 => 18.2.0
补充信息
TypeError
this.ctx.measureText is not a function
Call Stack
CanvasContext.measureText
node_modules/.pnpm/@tarojs taro-h5@3.6.24_@tarojs components@3.6.24_@tarojs taro@3.6.24/node_modules/@tarojs/taro-h5/dist/api/canvas/CanvasContext.js:645:23
measureText
src/components/cell/cell-text.tsx:46:24
eval
src/components/cell/cell-text.tsx:84:30
renderWithHooks
node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js:16305:18
mountIndeterminateComponent
node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js:20069:13
beginWork
node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js:21582:16
HTMLUnknownElement.callCallback
node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js:4164:14
HTMLUnknownElement.sentryWrapped
node_modules/.pnpm/@sentry browser@7.93.0/node_modules/@sentry/browser/esm/helpers.js:101:17
Object.invokeGuardedCallbackDev
node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js:4213:16
invokeGuardedCallback
node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js:4277:31
1条答案
按热度按时间sf6xfgos1#
h5 环境下需要添加节点且渲染完成后才能正确创建上下文: Taro.createCanvasContext('measureText')