收藏
回答

Canvas绘图小程序问题:在模拟器上可以正常运行,但在PC端和手机端真机调试运行报错?

关于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({ idtruenodetruesizetrue })
            .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)

回答关注问题邀请回答
收藏

4 个回答

  • 陕西鲜果直发-丫丫
    陕西鲜果直发-丫丫
    2022-02-08

    https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

    官方文档给的这个示例代码和例子程序,在PC端预览里就跑不通

    我看这个社区里近一两年有不少人提出过类似的问题,但从回复来看都没有彻底解决,官方也一直没个权威解决方案

    2022-02-08
    有用 4
    回复
  • frank
    frank
    01-17

    你好,解决了吗,最近也发现这个问题,这个因该是移动端没拿到node,打印下就发现了

    01-17
    有用
    回复
  • Code Weaver
    Code Weaver
    2022-02-07

    真机调试不支持type2d,PC端应该也是不支持。

    2022-02-07
    有用
    回复 9
    • 陕西鲜果直发-丫丫
      陕西鲜果直发-丫丫
      2022-02-07
      这样啊,不过我同时用了真机预览也报同样的错误,感觉真机和模拟器在运行环境上存在差异,感觉小程序SDK对canvas各种API实现上存在遗漏或者兼容性问题?
      2022-02-07
      回复
    • Code Weaver
      Code Weaver
      2022-02-08回复陕西鲜果直发-丫丫
      肯定是有差异啊。毕竟手机是终端。模拟器只是电脑尽量模拟手机的运行环境而已。
      2022-02-08
      回复
    • 陕西鲜果直发-丫丫
      陕西鲜果直发-丫丫
      2022-02-08回复Code Weaver
      有差异我知道,关键是官方文档里没有体现啊,接口的通用性有待提高,或者给出存在差异的接口/功能实现在不同平台下的不同写法示例,现在解决这种问题基本靠猜实在太耽误时间了,所以才要请教各位有经验的大佬啊
      2022-02-08
      回复
    • Code Weaver
      Code Weaver
      2022-02-08回复陕西鲜果直发-丫丫
      用你提供的代码 试了下正常:
      2022-02-08
      回复
    • 陕西鲜果直发-丫丫
      陕西鲜果直发-丫丫
      2022-02-08回复Code Weaver
      请问你正常运行环境是怎样的呢,如sdk版本和微信版本等
      2022-02-08
      回复
    查看更多(4)
  • 微喵网络
    微喵网络
    2022-02-07

    来个代码片段

    2022-02-07
    有用
    回复 1
    • 陕西鲜果直发-丫丫
      陕西鲜果直发-丫丫
      2022-02-07
      关键代码片段在问题描述里已经贴出来了,其实就是实现一个从布局中提取canvas和context对象后再进一步处理和绘制的功能,基本是按官方文档的示例代码写的。
      2022-02-07
      回复
登录 后发表内容