<template>
      <canvas
      :style="{ width: '100%', height: '400rpx' }"
      canvas-id="canvasId"
    ></canvas>
    <!-- <view>
      <image :src="imgsrc" :style="{ width: '100%', height: '400rpx' }"></image>
    </view> -->
</template>

<script>
import Utils from '@/utils/downfiles.js';
export default {
  data() {
    return {
      context: {},
      picList: [],
      imgsrc:'../../static/imgs/20220720-115535_001.png',
      wid:0
    };
  },
  // onload生命周期
  mounted () {
    //首先获取屏幕宽度
    let device=this.getData();
    let width=device.windowWidth;
    //然后需要确定比例，设计图一般都是750的屏幕，这里是375px
    this.wid=width / 375
    
    // 第一次加载的占位的图片
    this.context = uni.createCanvasContext("canvasId", this);
    this.context.drawImage("../../static/imgs/20220720-115535_001.png", 0, 0, 375*this.wid, 200*this.wid);
    this.context.draw(); 
    // return
    for(let i = 1;i <=37;i++){
      let src = ''
      if (i < 10) {
        src = `https://songclound.oss-cn-hongkong.aliyuncs.com/2022/07/20/20220720-115535_00${i}.png`;
      } else if (10 <= i < 100) {
        src = `https://songclound.oss-cn-hongkong.aliyuncs.com/2022/07/20/20220720-115535_0${i}.png`;
      }
      this.picList.push(src)
    }

    // return
    Utils.downfiles(this.picList,7).then(res=>{
      this.picList = res
      this.startCanvas()
    })
  },
  methods: {

		getData(){
			var result = 0;
			uni.getSystemInfo({
					success: function(res) {
						result = res
					}
			});
			return result;
    },
    startCanvas() {
      console.log("图片下载完成啦！开始动画效果！");
      let i = 0;
      setInterval(() => {
        if (i < 37) {
          const src = this.picList[i];
          // this.imgsrc = src
          this.context = uni.createCanvasContext("canvasId", this);
          this.context.drawImage(src, 0, 0, 375*this.wid, 200*this.wid);
          this.context.draw(); 
          i++;
        } else {
          i = 0;
        }
      }, 30);
    },
  },
};
</script>

<style scoped>
.canva{
  z-index: 0;
}
</style>