uniapp js 画出扫码线上下不断循环的代码

以下是 uniapp js 画出扫码线上下不断循环的代码：

<template>
  <view class="container">
    <canvas canvas-id="barcode" class="barcode"></canvas>
    <view class="scan-line"></view>
  </view>
</template>

<script>
  export default {
    onReady() {
      const ctx = uni.createCanvasContext('barcode', this);
      const scanLine = this.$refs.scanLine;

      const draw = () => {
        ctx.drawImage('/static/barcode.png', , , 300, 300);
        ctx.draw();

        let top = ;
        const animate = () => {
          top += 2;
          if (top >= 300) {
            top = ;
          }
          scanLine.style.top = top + 'rpx';
          requestAnimationFrame(animate);
        };
        animate();
      };

      uni.getImageInfo({
        src: '/static/barcode.png',
        success: () => {
          draw();
        },
      });
    },
  };
</script>

<style>
  .container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .barcode {
    width: 100%;
    height: 100%;
  }

  .scan-line {
    position: absolute;
    top: ;
    left: ;
    width: 100%;
    height: 2rpx;
    background-color: #fff;
    opacity: .5;
  }
</style>