Taro: 谁能提供一个Taro 3.0.9 版本的 Canvas 使用代码 Demo 啊，搞了一周了也没能正常用

[gongzili456]

相关平台

微信小程序

复现仓库

https://github.com
小程序基础库: 最新的
使用框架: React

复现步骤

无

期望结果

正常的使用 Canvas

实际结果

type=2d 的 query select 方式确实能在IDE的模拟环境可用，但是在真机却无法使用
用 Taro.createCanvasContext("abc"); 则什么都画不出来

环境信息

❯ npx taro info                              
👽 Taro v3.0.9


  Taro CLI 3.0.9 environment info:
    System:
      OS: macOS 10.15.6
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
      Yarn: 1.22.5 - ~/.nvm/versions/node/v12.18.3/bin/yarn
      npm: 6.14.6 - ~/.nvm/versions/node/v12.18.3/bin/npm
    npmPackages:
      @tarojs/components: 3.0.9 => 3.0.9 
      @tarojs/mini-runner: 3.0.9 => 3.0.9 
      @tarojs/react: 3.0.9 => 3.0.9 
      @tarojs/runtime: 3.0.9 => 3.0.9 
      @tarojs/taro: 3.0.9 => 3.0.9 
      @tarojs/webpack-runner: 3.0.9 => 3.0.9 
      babel-preset-taro: 3.0.9 => 3.0.9 
      eslint-config-taro: 3.0.9 => 3.0.9 
      react: ^16.10.0 => 16.13.1 
      taro-ui: ^2.3.4 => 2.3.4 

[Darcrandex]

同求， 自从升级到 3.x，canvas没正常过。但是恶心的tx又更新了canvas的api。现在不知道怎么搞。T-T

[BoomBooA]

7314，给 Canvas 设置下 type='' 就正常了😂

[gongzili456]

7314，给 Canvas 设置下 type='' 就正常了😂

我在IDE上绘制图片完全正常，但是预览到真机后 位置和尺寸就偏离了，完全懵逼了

[shenghanqin]

7314，给 Canvas 设置下 type='' 就正常了😂

我在IDE上绘制图片完全正常，但是预览到真机后 位置和尺寸就偏离了，完全懵逼了

帅哥，加油呀。我是半年前从alpha版就开始弄canvas了，在微信小程序上跑通了，当时在h5上还有点问题。

[BoomBooA]

7314，给 Canvas 设置下 type='' 就正常了😂

我在IDE上绘制图片完全正常，但是预览到真机后 位置和尺寸就偏离了，完全懵逼了

好吧。。。是我理解错了

[gongzili456]

找到这篇文章，将里面的代码翻译成 Taro 的写法是可以的
https://www.cnblogs.com/alpiny/p/12574017.html

[li534188]

7314，给 Canvas 设置下 type='' 就正常了😂

确实是这样的，折腾了好久....

[shenghanqin]

7314，给 Canvas 设置下 type='' 就正常了😂

确实是这样的，折腾了好久....

是不是你用的是非2d版本canvas？

[luckhpy]

同求：3.0.7 版本，以下代码，回调完全不执行。canvas 上面的 handleTouchStart 事件估计也是因为根本没有 draw 的原因，也不会执行，已经试了设置 type='' 无效

    this.gestureContext = Taro.createCanvasContext('gestureCanvas')
    this.gestureContext.clearRect(0, 0, width, height)
    this.gestureContext.draw(false, () => {
      console.log('----------call back')
    })

[mrKingAndroid]

同求：3.0.10 版本，编译到h5
以下代码，const ctx = Taro.createCanvasContext("canvasProgress0", this);
报错 ：
Uncaught (in promise) TypeError: Cannot read property 'getContext' of null
at createCanvasContext

[shenghanqin]

是微信版吗？可以看看taro-cropper的react版试试看

[fancyhejianyang]

@mrKingAndroid 可能刚开始获取不到节点，setTime一会再取

[liujunzheng]

7314，给 Canvas 设置下 type='' 就正常了😂

确实是这样的，折腾了好久....

还是挺难受的，麻蛋，折腾两天了，终于来这里找到答案了。。。。再加上最后一条setTimeout，终于舒了一口气。。。。

[zhaoguoweiLLHC]

我也折腾了好久，最后这样解决的。

function Fn2() {

  useEffect(() => {
    console.log('res useEffect');

    if (process.env.TARO_ENV === 'weapp') {
      function getWxCanvas(): Promise<{ node, width, height }[]> {
        return new Promise(resolve => {
          function getLoop() {
            console.log("触发了getLoop");
            Taro.createSelectorQuery().select('#fn2')
              .fields({node: true, size: true}).exec(function (res) {
              if (res[0] && res[0].node) {
                resolve(res)
              } else {
                setTimeout(() => {
                  getLoop()
                }, 100)

              }
            })

          }

          getLoop()
        })
      }

      getWxCanvas().then(res => {
        const canvas = res[0].node;
        const ctx = canvas.getContext('2d');

      })
    } else if (process.env.TARO_ENV === 'h5') {
      function getH5Canvas(): Promise<HTMLCanvasElement> {
        return new Promise(resolve => {
          function getLoop() {
            console.log("触发了getLoop");
            const canvas = document.querySelector<HTMLCanvasElement>('#fn2>canvas');
            if (canvas) {
              resolve(canvas)
            } else {
              setTimeout(() => {
                getLoop()
              }, 100)

            }

          }

          getLoop()
        })
      }

      getH5Canvas().then(canvas => {
        const ctx = canvas.getContext('2d')!;
      })


    }


    // eslint-disable-next-line
  }, []);


  return <Canvas
    id={'fn2'} type='2d'
  />
}

[shenghanqin]

尽量不要用canvas2d，用老版本的。

看看这个issue https://github.com/NervJS/taro/issues/8039

[darkfiredarkhalo]

涉及canvas的地方还是建议原生实现, 参考这里: https://nervjs.github.io/taro/docs/hybrid

[darkfiredarkhalo]

感觉这个项目越更新越不可控了😂

[gongzili456]

hello树先生 [e-mail]于2020年11月30日 周一14:36写道：

感觉这个项目越更新越不可控了😂

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/NervJS/taro/issues/7587#issuecomment-735582305, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/ABOM6H7KN5GNC5BG3UK5WL3SSM4NXANCNFSM4RFKKFJA
.

每次模拟器调试都是成功的，到了真机上就各种问题