taro微信小程序中的canvas圆环

 useEffect(() => {
    Taro.createSelectorQuery()
      .select("#canvas")
      .fields({ node: true, size: true })
      .exec(res => {
        if (res[0] && res[0].width) {
          if(stopDraw) return;
          const canvas = res[0].node;
          const ctx = canvas.getContext("2d");
          // Canvas 画布的实际绘制宽高
          const width = res[0].width;
          const height = res[0].height;
          // 初始化画布大小
          const dpr = Taro.getSystemInfoSync().pixelRatio;
          canvas.width = width * dpr;
          canvas.height = height * dpr;
          const w = width * dpr;
          const h = height * dpr;
          // 绘制内圆
          ctx.lineWidth = 13 * dpr;
          ctx.strokeStyle = "rgba(90, 216, 213, 0.5)";
          ctx.beginPath();
          ctx.arc(w / 2, h / 2, w / 2 - 20 * dpr, 0, Math.PI * 2, false); // 绘制
          ctx.stroke();
          const b = canvas.toDataURL();
          setBase64_small(b);
          console.log(b);
          setStopDraw(true);
          ctx.clearRect(0, 0, 1000, 1000);
        }
      });
  });
  useEffect(() => {
    const orderMsg = endInit.orderMsg;
    console.log(endInit);
    if (orderMsg) {
      // '-' 替换 '/' 兼容iPhone
      const startT = new Date(orderMsg.startDate.replace(/-/g, "/")).getTime();
      const allT = orderMsg.duration * 60 * 1000;
      const endT = startT + allT;
      if (!timerInterval) {
        setIsEnd(false);
        // 设置延迟获取canvas节点
        let remainT;
        setTimeout(() => {
          remainT = endT - Date.now();
          if (remainT <= 0) {
            remainT = allT;
            setIsEnd(true);
            clearInterval(timer);
          } else {
            remainT = -remainT;
          }
          draw(remainT, allT);
        }, 20);
        const timer = setInterval(() => {
          remainT = endT - Date.now();
          // 小于零时设置为0;
          if (remainT <= 0) {
            remainT = allT;
            setIsEnd(true);
            clearInterval(timer);
          } else {
            remainT = -remainT;
          }
          draw(remainT, allT);
        }, 1000);
        setTimerInterval(timer);
      }
    }
  });
  // 环形
  function draw(remain, all) {
    console.log(remain, all);
    Taro.createSelectorQuery()
      .select("#canvas")
      .fields({ node: true, size: true })
      .exec(res => {
        if (res[0] && res[0].width) {
          const canvas = res[0].node;
          const ctx = canvas.getContext("2d");
          // Canvas 画布的实际绘制宽高
          const width = res[0].width;
          const height = res[0].height;
          // 初始化画布大小
          const dpr = Taro.getSystemInfoSync().pixelRatio;
          canvas.width = width * dpr;
          canvas.height = height * dpr;
          const w = width * dpr;
          const h = height * dpr;
          // 绘制百分比外圆
          ctx.lineWidth = 26 * dpr;
          ctx.strokeStyle = "rgba(90, 216, 213, 1)";
          ctx.lineCap = "round";
          ctx.shadowColor = "#999";
          ctx.shadowBlur = 5 * dpr;
          ctx.beginPath();
          ctx.arc(
            w / 2,
            h / 2,
            w / 2 - 20 * dpr,
            0,
            ((Math.PI * 2) / all) * remain,
            false
          ); // 绘制
          ctx.stroke();
          const b = canvas.toDataURL();
          setBase64(b);
         
          ctx.clearRect(0, 0, 1000, 1000);
        }
      });
  }

 

 useEffect(() => {

    Taro.createSelectorQuery()

      .select("#canvas")

      .fields({ node: true, size: true })

      .exec(res => {

        if (res[0] && res[0].width) {

          if(stopDraw) return;

          const canvas = res[0].node;

          const ctx = canvas.getContext("2d");

          // Canvas 画布的实际绘制宽高

          const width = res[0].width;

          const height = res[0].height;

          // 初始化画布大小

          const dpr = Taro.getSystemInfoSync().pixelRatio;

          canvas.width = width * dpr;

          canvas.height = height * dpr;

          const w = width * dpr;

          const h = height * dpr;

          // 绘制内圆

          ctx.lineWidth = 13 * dpr;

          ctx.strokeStyle = "rgba(90, 216, 213, 0.5)";

          ctx.beginPath();

          ctx.arc(w / 2, h / 2, w / 2 - 20 * dpr, 0, Math.PI * 2, false); // 绘制

          ctx.stroke();

          const b = canvas.toDataURL();

          setBase64_small(b);

          console.log(b);

          setStopDraw(true);

          ctx.clearRect(0, 0, 1000, 1000);

        }

      });

  });

  useEffect(() => {

    const orderMsg = endInit.orderMsg;

    console.log(endInit);

    if (orderMsg) {

      // '-' 替换 '/' 兼容iPhone

      const startT = new Date(orderMsg.startDate.replace(/-/g, "/")).getTime();

      const allT = orderMsg.duration * 60 * 1000;

      const endT = startT + allT;

      if (!timerInterval) {

        setIsEnd(false);

        // 设置延迟获取canvas节点

        let remainT;

        setTimeout(() => {

          remainT = endT - Date.now();

          if (remainT <= 0) {

            remainT = allT;

            setIsEnd(true);

            clearInterval(timer);

          } else {

            remainT = -remainT;

          }

          draw(remainT, allT);

        }, 20);

        const timer = setInterval(() => {

          remainT = endT - Date.now();

          // 小于零时设置为0;

          if (remainT <= 0) {

            remainT = allT;

            setIsEnd(true);

            clearInterval(timer);

          } else {

            remainT = -remainT;

          }

          draw(remainT, allT);

        }, 1000);

        setTimerInterval(timer);

      }

    }

  });

  // 环形

  function draw(remain, all) {

    console.log(remain, all);

    Taro.createSelectorQuery()

      .select("#canvas")

      .fields({ node: true, size: true })

      .exec(res => {

        if (res[0] && res[0].width) {

          const canvas = res[0].node;

          const ctx = canvas.getContext("2d");

          // Canvas 画布的实际绘制宽高

          const width = res[0].width;

          const height = res[0].height;

          // 初始化画布大小

          const dpr = Taro.getSystemInfoSync().pixelRatio;

          canvas.width = width * dpr;

          canvas.height = height * dpr;

          const w = width * dpr;

          const h = height * dpr;

          // 绘制百分比外圆

          ctx.lineWidth = 26 * dpr;

          ctx.strokeStyle = "rgba(90, 216, 213, 1)";

          ctx.lineCap = "round";

          ctx.shadowColor = "#999";

          ctx.shadowBlur = 5 * dpr;

          ctx.beginPath();

          ctx.arc(

            w / 2,

            h / 2,

            w / 2 - 20 * dpr,

            0,

            ((Math.PI * 2) / all) * remain,

            false

          ); // 绘制

          ctx.stroke();

          const b = canvas.toDataURL();

          setBase64(b);

         

          ctx.clearRect(0, 0, 1000, 1000);

        }

      });

  }