ctx.draw is not a function

[darkfiredarkhalo]

相关平台

微信小程序

小程序基础库: 2.14.0
使用框架: React

复现步骤

使用canvas绘制图片,最后调用draw方法,报错: ctx.draw is not a function
ctx对象生成方式:

// 获取canvas实例
const getCanvasCtx = async (eleId: string = "") => {
  return new Promise((resolve, reject) => {
    Taro.createSelectorQuery()
      .select(`#${eleId}`)
      .fields({node: true, size: true})
      .exec((res) => {
        if (res && res[0] && res[0].node) {
          const width = res[0].width;
          const height = res[0].height;
          const canvas = res[0].node;
          const ctx = canvas.getContext('2d');
          resolve({canvas, ctx, width, height});
        } else {
          reject({});
        }
      });
  });
};

使用Taro. createCanvasContext()创建不出来示例

期望结果

正常使用

实际结果

ctx.draw is not a function

环境信息

👽 Taro v3.0.3


  Taro CLI 3.0.3 environment info:
    System:
      OS: macOS 10.15.7
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 12.16.3 - /usr/local/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.14.8 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 3.0.17 => 3.0.17 
      @tarojs/components: 3.0.17 => 3.0.17 
      @tarojs/mini-runner: 3.0.17 => 3.0.17 
      @tarojs/react: 3.0.17 => 3.0.17 
      @tarojs/runtime: 3.0.17 => 3.0.17 
      @tarojs/taro: 3.0.17 => 3.0.17 
      @tarojs/webpack-runner: 3.0.17 => 3.0.17 
      babel-preset-taro: 3.0.17 => 3.0.17 
      eslint-config-taro: 3.0.17 => 3.0.17 
      react: ^16.10.0 => 16.14.0 

[Chen-jj]

两种方式都测过没有问题，注意要在 onReady 生命周期中获取小程序 DOM：

import React, { Component } from 'react'
import { View, Canvas } from '@tarojs/components'
import Taro from '@tarojs/taro'
import './index.scss'

export default class Index extends Component {
  getCanvasCtx = async (eleId = "") => {
    return new Promise((resolve, reject) => {
      Taro.createSelectorQuery()
        .select(`#${eleId}`)
        .fields({node: true, size: true})
        .exec((res) => {
          if (res && res[0] && res[0].node) {
            const width = res[0].width;
            const height = res[0].height;
            const canvas = res[0].node;
            const ctx = canvas.getContext('2d');
            resolve({canvas, ctx, width, height});
          } else {
            reject({});
          }
        });
    });
  }
  onReady() {
    this.getCanvasCtx('myCanvas')
      .then(res => {
        console.log('res', res)
      })
      .catch(err => console.log('err: ', err))

    const ctx = Taro.createCanvasContext('myCanvas')
    console.log('ctx: ', ctx, typeof ctx.draw)
  }
  render () {
    return (
      <View className='page-demo'>
        <Canvas type='2d' id='myCanvas'></Canvas>
      </View>
    )
  }
}