canvas-(3):自适应

<template>
  <div class="box">
    <!-- 
      
      canvas自适应
      

      注意：如果video可以随着窗口大小变化，那么这个框是前端随之改变还是后台算法，
      意思就是这个框是在前端画的还是视频流自带的？
      


     -->
    <div class="bg">
      <!-- 在css设置了canvas本身的大小，在mountd里写的宽高 设置了canvas画布大小 -->
      <canvas id="myCanvas"></canvas>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        list:[],
        x_num:'',
        y_num:'',
        width_num:'',
        height_num:'',
      }
    },
    mounted() {
      // 在500*400画布上画一个(175,35,100,100) 的矩形
      /* this.$nextTick(()=>{
        const canvas = document.getElementById('myCanvas')
        this.ctx = canvas.getContext("2d");

        const bg = document.getElementsByClassName('bg')[0] //动态获取父元素 宽高--->赋值

        canvas.width = bg.clientWidth
        canvas.height = bg.clientHeight

        this.ctx.strokeRect(175,35,100,100) 


        // 计算 
        let x = 175 //坐标
        let y = 35
        let width = 100
        let height = 100

        let box_w = 500 //画布大小
        let box_h = 400

        this.x_num = x / box_w
        this.y_num = y / box_h 
        this.width_num = width / box_w
        this.height_num = height / box_h 
        console.log(this.x_num,this.y_num,this.width_num,this.height_num)

      })  */

      this.x_num = 0.35
      this.y_num = 0.0875
      this.width_num = 0.2
      this.height_num = 0.25

      // 随机大小
      this.$nextTick(()=>{
        const canvas = document.getElementById('myCanvas')
        this.ctx = canvas.getContext("2d");

        const bg = document.getElementsByClassName('bg')[0] //动态获取父元素 宽高--->赋值

        canvas.width = bg.clientWidth
        canvas.height = bg.clientHeight
        let width = bg.clientWidth
        let height = bg.clientHeight

        this.ctx.strokeRect(this.x_num * width,this.y_num * height,this.width_num * width,this.height_num * height)

      })

    },
    methods:{
    }
  }
</script>
<style scoped>
.box{
  width: 100%;
  height: 100%;
  position: relative;
}
.bg{
 /*  width: 80%;
  height: 70%; */
  width: 500px;
  height: 400px;
  /* width: 725px;
  height: 500px; */
  position: absolute;
  top: 0;
  left: 50px;
  background: url('../assets/123.png');
  background-position: center;
  background-size: cover;
  /* z-index: 10; */
}
canvas{
  /* z-index: 120; */
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid red;
}

</style>