canvas 画图和进度条

<template>
  <div>
    <canvas id="main"></canvas>
  </div>
</template>
<script>
export default {
  data() {
    return {
      bgImage: require("../../imgs/partner/l_bg@2x.png"),
      carImage: require("../../imgs/partner/l_car.png"),
      bg2: require("../../imgs/partner/o_bg@2x.png"),
      openImg: require("../../imgs/partner/open.png"),
      logoImg: require("../../imgs/partner/logo@2x.png"),
      perImg: require("../../imgs/partner/person_1.png"),
      boxImg: require("../../imgs/partner/p_box.png"),
      rpx: document.documentElement.clientWidth / 375,
      carDom: "",
      bgDom: "",
      bgRead: false,
      cans: null,
      ctx: null,
      height: document.documentElement.clientHeight,
      width: document.documentElement.clientWidth,
      imgH: "",
      imgW: "",
      W: "",
      H: "",
      num: 1,
      progress: 0,
      bg2Dom: "",
      bg2W: "",
      bg2H: "",
      openDom: "",
      Oh: "",
      Ow: "",
      logoDom: "",
      lh: "",
      lw: "",
      perDom: "",
      ph: "",
      pw: "",
      boxDom: "",
      bh: "",
      bw: "",
    };
  },
  created() {},
  mounted() {
    this.cans = document.getElementById("main");
    this.ctx = this.cans.getContext("2d");
    this.bgDom = new Image();
    this.bgDom.onload = () => {
      this.bgReady = true;
      this.imgW = this.bgDom.width;
      this.imgH = this.bgDom.height;
      this.init();
      console.log("111");
    };
    this.bgDom.src = this.bgImage;

    // 车子动画
    this.carDom = new Image();
    this.carDom.onload = () => {
      console.log("222");
      this.W = this.carDom.width;
      this.H = this.carDom.height;
      this.init();
      // this.ctx.drawImage(this,104,762)
    };
    this.carDom.src = this.carImage;
    // 这是loading的开店
    this.bg2Dom = new Image();
    this.bg2Dom.onload = () => {
      this.bg2W = this.bg2Dom.width;
      this.bg2H = this.bg2Dom.height;
    };
    this.bg2Dom.src = this.bg2;

    this.openDom = new Image();
    this.openDom.onload = () => {
      this.Oh = this.openDom.height;
      this.Ow = this.openDom.width;
    };
    this.openDom.src = this.openImg;
    // loding
    this.logoDom = new Image();
    this.logoDom.onload = () => {
      this.lh = this.logoDom.height;
      this.lw = this.logoDom.width;
    };
    this.logoDom.src = this.logoImg;
    // 人
    this.perDom = new Image();
    this.perDom.onload = () => {
      this.ph = this.perDom.height;
      this.pw = this.perDom.width;
    };
    this.perDom.src = this.perImg;

    // 盒子
    this.boxDom = new Image();
    this.boxDom.onload = () => {
      this.bh = this.boxDom.height;
      this.bw = this.boxDom.width;
    };
    this.boxDom.src = this.boxImg;

    window.onresize = () => {
      console.log(this.height, this.width);
      this.init();
    };
    //   setInterval(() => {
    //    console.log();
    //    this.num++
    //    const canvas = document.getElementById("main");
    //   const ctx = canvas.getContext("2d");
    //   this.ctx.drawImage(this.carDom, 52*this.num, 378*(this.width/375),this.W*(this.width/375),
    //     this.H * (this.width/375));
    // }, 10000);
  },
  methods: {
    init() {
      this.cans.width = this.width;
      this.cans.height = this.height;
      this.drawImage();
    },
    drawImage() {
      const canvas = document.getElementById("main");
      const ctx = canvas.getContext("2d");
      ctx.drawImage(
        this.bgDom,
        0,
        0,
        this.imgW,
        this.imgH,
        0,
        0,
        canvas.width,
        canvas.height
      );
      ctx.drawImage(
        this.logoDom,
        105 * this.rpx,
        172 * this.rpx,
        this.lw * this.rpx,
        this.lh * this.rpx
      );
      // 绘制背景图
      //   ctx.drawImage(
      //     this.bgDom,
      //     0,
      //     0,
      //     this.width,
      //     (this.imgH * this.width) / this.imgW
      //   );
      //   增加文字
      ctx.font = "28px Arial";
      ctx.fillStyle = "white";
      ctx.fillText(
        "Loading",
        155 * (this.width / 375),
        425 * (this.width / 375)
      );
      ctx.font = "12px Arial";
      ctx.fillStyle = "white";
      ctx.fillText(
        "Please  Wait…",
        155 * (this.width / 375),
        445 * (this.width / 375)
      );

      //   ctx.clearRect(52, 300, 200, 10);
      //   //   首先绘制背景
      //   ctx.fillStyle = "red";
      //   ctx.fillRect(52, 378, 271 * (this.width / 375), 22 * (this.width / 375));
      ctx.beginPath();
      ctx.lineWidth = 12;
      ctx.strokeStyle = "#77ceff";
      ctx.lineTo(52 * (this.width / 375), 381 * (this.width / 375));
      ctx.lineTo(323 * (this.width / 375), 381 * (this.width / 375));
      ctx.stroke();
      ctx.closePath();
      // 开始绘制绿色线段
      ctx.beginPath();
      var gnt1 = ctx.createLinearGradient(0, 0, 300, 0); //线性渐变的起止坐标
      gnt1.addColorStop(0, "#1fd8fb"); //创建渐变的开始颜色，0表示偏移量，个人理解为直线上的相对位置，最大为1，一个渐变中可以写任意个渐变颜色
      gnt1.addColorStop(0.5, "#56c4fb");
      gnt1.addColorStop(1, "#1fd8fb");
      ctx.lineWidth = 12; // 设置线宽
      ctx.strokeStyle = gnt1; // 画笔颜色
      ctx.lineTo(52 * (this.width / 375), 381 * (this.width / 375));
      ctx.lineTo(
        45 * (this.width / 375) + this.progress * (this.width / 375),
        381 * (this.width / 375)
      );
      ctx.stroke();
      ctx.closePath();
      //  进度条车移动
      ctx.drawImage(
        this.carDom,
        this.width / 375 + this.progress * (this.width / 375),
        358 * (this.width / 375),
        this.W * (this.width / 375),
        this.H * (this.width / 375)
      );

      this.progress++;
      // 进度条移动
      if (this.progress <= 271) {
        // 通过setTimeout进行递归调用更新
        setTimeout(() => {
          this.drawImage();
        }, 20);
      } else {
        ctx.clearRect(0, 0, this.width, this.height);

        // 绘制背景图

        this.drawImage2();
      }
    },
    drawImage2() {
      const canvas = document.getElementById("main");
      const ctx = canvas.getContext("2d");
      ctx.drawImage(
        this.bg2Dom,
        0,
        0,
        this.bg2W,
        this.bg2H,
        0,
        0,
        canvas.width,
        canvas.height
      );

      //   ctx.drawImage(
      //     this.bg2Dom,
      //     0,
      //     0,
      //     canvas.width(),
      //     this.bg2H* canvas.width/this.bg2W
      //     // (this.bg2H * this.width) / this.bg2W
      //   );
      console.log(
        this.rpx,
        this.Ow,
        this.Oh,
        this.Ow * this.rpx,
        ((this.Oh * this.width) / this.Ow) * this.rpx
      );
      ctx.drawImage(
        this.openDom,
        100 * this.rpx,
        514 * this.rpx,
        this.Ow * this.rpx,
        this.Oh * this.rpx
      );
      ctx.drawImage(
        this.perDom,
        57 * this.rpx,
        54 * this.rpx,
        this.pw * this.rpx,
        this.ph * this.rpx
      );
      ctx.drawImage(
        this.boxDom,
        57 * this.rpx,
        302 * this.rpx,
        this.bw * this.rpx,
        this.bh * this.rpx
      );
      let size1 = 12 * this.rpx + "px";
      ctx.font = `${size1} Arial`;
      ctx.fillStyle = "white";
      ctx.fillText(
        "恭喜您喜提4S店！即将成为4S店店长啦！",
        canvas.width / 2,
        345 * this.rpx
      );

      console.log(this.width / 2, (this.width / 2) * this.rpx);
      let arr = [
        "您可以拥有并打造一家梦想的店面，",
        "可以随心所欲地装饰门店、雇佣和培训员工，",
        "可以自由决定门店的经营策略并获得收入",
        "与百万用户一起，",
        "马上开启这场轻松有趣的创业之旅吧！",
      ];
      for (let i = 1; i < 6; i++) {
        let size = 10 * this.rpx + "px";
        ctx.font = `${size} Arial`;
        ctx.fillStyle = "white";
        ctx.textAlign = "center";
        ctx.fillText([arr[i - 1]], canvas.width / 2, (355 + i * 14) * this.rpx);
      }
    },
  },
};
</script>
<style lang="less">
</style>