新建一个小程序项目,
1、在pages/index.wxml中加入:
<canvas type=‘2d’ id=‘testcanv’ style=‘width:100%;height:300px’></canvas>
2、在app.js:onLoad中加入:
wx.createSelectorQuery().select(’#testcanv’).node((res)=>{
if (res && res.node) {
let {node:canvas}=res
console.log(‘found node!’)
wx.getSystemInfo({success:sysinfo=>{
let s = “hello world”
let ctx = canvas.getContext(‘2d’)
ctx.font = “32px bold Arial”
let w=ctx.measureText(s).width
ctx.fillText(s, sysinfo.screenWidth/2-w/2, 32)
}})
}
else console.log(‘node not found’)
}).exec()
3、点击远程调试(测试机分别使用iPhoneXR 及 华为M6 pad, 系统及微信均更新到最新版), 开发工具抛出以下异常:
runtime.js?devtools_ignore=true:1 eval script evaluate_id #12 failed TypeError: r.Canvas is not a constructor
at n.value (eval at n.call.document (runtime.js?devtools_ignore=true:1), <anonymous>:2:733280)
at n.value (eval at n.call.document (runtime.js?devtools_ignore=true:1), <anonymous>:2:621289)
at t (eval at n.call.document (runtime.js?devtools_ignore=true:1), <anonymous>:2:621461)
at b (eval at n.call.document (runtime.js?devtools_ignore=true:1), <anonymous>:2:620332)
at eval (eval at n.call.document (runtime.js?devtools_ignore=true:1), <anonymous>:2:732657)
at eval (eval at n.call.document (runtime.js?devtools_ignore=true:1), <anonymous>:2:717590)
at Object.m (eval at n.call.document (runtime.js?devtools_ignore=true:1), <anonymous>:2:77498)
at Object.value [as subscribeHandler] (runtime.js?devtools_ignore=true:1)
at eval (eval at c (runtime.js?devtools_ignore=true:1), <anonymous>:1:17)
at eval (<anonymous>)