字节跳动小程序 canvas倒计时环

概述

一个倒计时环，顺时针减少；中间为数字

截图

主要参数

1.参数：

• canvasId - canvas的canvas-id属性值
• opt:{ canvasW,canvasH,centerX,centerY,R,lineWidth,startRotate,endRotate,textColorsArr,totalTime(单位秒) }
  textColorsArr:一个颜色数组，根据颜色种类，按照区段，更改进度条配色
  totalTime: 倒计时规定的时间，单位秒
• timeoutFn - 倒计时结束的回调函数
  2.方法：
• startClock - 开始计时器 (第二次开始，需要先重置，不封装在一起了)
• stopClock - 函数返回值有个方法，结束计时，并返回剩余的时间（取整的）
• resetClock - 重置计时器

注意事项

字节跳动开发者工具中，使用rpx，但是真机上canvas渲染为px,因此需要针对真机与实操布局尺寸按照比例，进行后续修正
具体操作;

代码

函数声明

function canvasClock(canvasId,opt,timeoutFn){
  const ctx = tt.createCanvasContext(canvasId);
  let {canvasW,canvasH,centerX,centerY,R,lineWidth,startRotate,endRotate,textColorsArr,totalTime} = opt;

  let iTimer = null;
  let lineColors = textColorsArr;
  //备份还原信息
  let oldStartRotate = startRotate;
  let oldTotalTime = totalTime;
  let resText = '';

  //跟随绘制改变的参数信息
  let rotateNum = startRotate;
  let showTime = totalTime;

  //画布绘制
  function initCanvasDraw(){
    ctx.clearRect(0, 0, canvasW, canvasH);
    
    //绘制底层圆线
    ctx.beginPath();
    ctx.setLineWidth(lineWidth);
    ctx.arc(centerX, centerY, R, 0, 2* Math.PI);
    ctx.setStrokeStyle(lineColors[Math.floor(rotateNum/(endRotate/lineColors.length))]);
    ctx.stroke();

    //绘制顶层圆线
    ctx.beginPath();
    ctx.setLineWidth(lineWidth);
    ctx.arc(centerX, centerY, R, -90*Math.PI/180, (-90+rotateNum) * Math.PI/180);
    ctx.setStrokeStyle('#cccccc')
    ctx.stroke();

    //转换成倒计时秒
    resText = showTime - Math.floor(showTime/endRotate*rotateNum)
    ctx.setFillStyle('#000000');
    ctx.setFontSize(66);
    ctx.setTextAlign('center');
    ctx.setTextBaseline('middle')
    ctx.fillText(resText, centerX, centerY);
    ctx.draw();
  }
  initCanvasDraw();
  
  //方法：开始计时器
  function startClock(){
    //计数器canvas绘制部分
    iTimer = setInterval(function(){

      rotateNum+=1;
      if(rotateNum==endRotate){
        clearInterval(iTimer);
        //倒计时结束的回调函数
        timeoutFn && timeoutFn();
      }
      
      //画布绘制
      initCanvasDraw();

    },showTime*1000/360);
  }

  //方法：结束计时器，返回剩余时间
  function stopClock(){
    clearInterval(iTimer);
    console.log('手动停止计时');
    return resText;
  }

  //方法：重置计时器
  function resetClock(){
    rotateNum = oldStartRotate;
    showTime = oldTotalTime;
    initCanvasDraw();
    console.log('重置时间');
  }

  return {
    startClock,
    stopClock,
    resetClock
  }
}

函数调用
由于小程序中单位为rpx，但是真机上是px；
因此，真机上会引起渲染位置错误情况，
需要二次修正，具体操作

let clockObj = null;
Page({
  onLoad(){
    //canvas倒计时钟
    clockObj = canvasClock('canvas1',{
      canvasW:172,
      canvasH:172,
      centerX:86,
      centerY:86,
      R:74,
      lineWidth:10,
      startRotate:0,
      endRotate:360,
      textColorsArr:['#467cff','#467cff'],
      totalTime:20
    },function(){
      console.log('倒计时结束');
    });
  },
  ClockStartFn(){
    console.log('开始计时--点击')
    clockObj1.startClock();
  },
  ClockStopFn(){
    console.log('暂停计时--点击')
    let _tempMes = clockObj1.stopClock();
    console.log('剩余时间为: '+_tempMes);
  },
  ClockResetFn(){
    console.log('重置计时--点击')
    clockObj1.resetClock();
  }
  ...
});

ttml 代码

<view class="aniPage">
    <canvas class="canvasBox" canvas-id="canvas1"/>
    <button type="default" bindtap="ClockStartFn">开始计时</button>
    <button type="default" bindtap="ClockStopFn">停止计时</button>
    <button type="default" bindtap="ClockResetFn">重置时钟</button>
</view>