taro3.X版本 使用Taro.createCanvasContext创建canvas上下文后,无法调用draw的方法绘制canvas



  • import Taro from "@tarojs/taro";
    import { View, Button, Canvas } from "@tarojs/components";
    import React, { Component } from "react";
    
    interface IProps {}
    
    interface IState {}
    
    export default class Index extends Component<IProps, IState> {
      constructor(props) {
        super(props);
      }
    
      draw = () => {
        const ctx = Taro.createCanvasContext("myCanvas");
        // Draw coordinates
        ctx.arc(100, 75, 50, 0, 2 * Math.PI);
        ctx.setFillStyle("#EEEEEE");
        ctx.fill();
        ctx.beginPath();
        ctx.moveTo(40, 75);
        ctx.lineTo(160, 75);
        ctx.moveTo(100, 15);
        ctx.lineTo(100, 135);
        ctx.setStrokeStyle("#AAAAAA");
        ctx.stroke();
        ctx.setFontSize(12);
        ctx.setFillStyle("black");
        ctx.fillText("0", 165, 78);
        ctx.fillText("0.5*PI", 83, 145);
        ctx.fillText("1*PI", 15, 78);
        ctx.fillText("1.5*PI", 83, 10);
        // Draw points
        ctx.beginPath();
        ctx.arc(100, 75, 2, 0, 2 * Math.PI);
        ctx.setFillStyle("lightgreen");
        ctx.fill();
        ctx.beginPath();
        ctx.arc(100, 25, 2, 0, 2 * Math.PI);
        ctx.setFillStyle("blue");
        ctx.fill();
        ctx.beginPath();
        ctx.arc(150, 75, 2, 0, 2 * Math.PI);
        ctx.setFillStyle("red");
        ctx.fill();
        // Draw arc
        ctx.beginPath();
        ctx.arc(100, 75, 50, 0, 1.5 * Math.PI);
        ctx.setStrokeStyle("#333333");
        ctx.stroke();
        debugger
        ctx.draw(false, () => {
          console.log("绘制成功");
        });
      };
    
      render() {
        return (
          <View className="index">
            <Button onClick={this.draw}>点我生成</Button>
            <Canvas
              id="myCanvas"
              style={{ height: "400px", width: "400px" }}
            ></Canvas>
          </View>
        );
      }
    }
    
    


  • 3.0.7的版本不可以,3.0.5以下的版本都可以



  • 3.05以下的版本生命钩子比如onShareAppMessage ,componentDidShow不会执行,分享做不了。。



  • 添加个type属性是是 type='taro' =号后面随便写什么 我的就是这样 如果不加type 默认为 2d



  • @jd_68a7a906a2655 兄弟牛逼


登录后回复