关于canvas绘图小程序问题:在微信开发者工具提供的模拟器上可以正常运行,但在PC端和手机端真机调试运行报错,哪位大牛帮忙看一下是什么原因,该如何解决
index.wxml关键点代码:
<canvas id="canvas_preview" type="2d" mode="aspectFit" background-size="cover" style="vertical-align:middle; width:600px; height:600px"></canvas>
index.js关键代码:(参考小程序开发文档示例代码)
wx.createSelectorQuery().select('#canvas_preview').fields({ id: true, node: true, size: true })
.exec((res) => {
var canvas = res[0].node
var ctx = canvas.getContext('2d')
......
})
真机运行报错信息如下:
MiniProgramError
Cannot read property 'getContext' of null
TypeError: Cannot read property 'getContext' of null
at Object.eval (weapp:///pages/index/index.js:239:38)
at r.eval (eval at n.call.document (http://127.0.0.1:60808/remote-debug/runtime.js?devtools_ignore=true:1:14919), <anonymous>:2:1906677)
at <SelectorQuery callback function>
at eval (eval at n.call.document (http://127.0.0.1:60808/remote-debug/runtime.js?devtools_ignore=true:1:14919), <anonymous>:2:114523)
at eval (eval at n.call.document (http://127.0.0.1:60808/remote-debug/runtime.js?devtools_ignore=true:1:14919), <anonymous>:2:1906803)
at Array.forEach (<anonymous>)
at eval (eval at n.call.document (http://127.0.0.1:60808/remote-debug/runtime.js?devtools_ignore=true:1:14919), <anonymous>:2:1906791)
at eval (eval at n.call.document (http://127.0.0.1:60808/remote-debug/runtime.js?devtools_ignore=true:1:14919), <anonymous>:2:1906320)
at eval (eval at n.call.document (http://127.0.0.1:60808/remote-debug/runtime.js?devtools_ignore=true:1:14919), <anonymous>:2:2673503)
at A (eval at n.call.document (http://127.0.0.1:60808/remote-debug/runtime.js?devtools_ignore=true:1:14919), <anonymous>:2:2574511)
https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html
官方文档给的这个示例代码和例子程序,在PC端预览里就跑不通
我看这个社区里近一两年有不少人提出过类似的问题,但从回复来看都没有彻底解决,官方也一直没个权威解决方案
你好,解决了吗,最近也发现这个问题,这个因该是移动端没拿到node,打印下就发现了
真机调试不支持type2d,PC端应该也是不支持。
来个代码片段