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

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

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

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

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

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

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

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

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

好吧。。。是我理解错了

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

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

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

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

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

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

同求：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')
    })

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

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

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

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

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

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

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

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'
  />
}

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

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

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

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

hello树先生 notifications@github.com于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 .

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