Taro3.0.7版本canvas组件无法调用draw的方法,Taro2.x亲测是可以的



  • 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("testMe",this);
        console.log('ctx', ctx);
        
        // 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();    
    
        ctx.draw(false, () => {
          console.log("绘制成功");
        });
      };
    
      render() {
        return (
          <View className="index">
            <Button onClick={this.draw}>点我生成</Button>
            <Canvas
              canvasId="testMe"
              style={{ height: "400px", width: "400px" }}
            ></Canvas>
          </View>
        );
      }
    }
    
    


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


登录后回复