canvas-(1) ：展示矩形框

<template>
  <div class="box">
    <!-- 
      
      只是：让canvas展示出矩形框，
      

      注意：
      1.  Canvas标签包涵两个东西，一个是元素本身，另一个是元素绘图表面，他们都有各自的尺寸大小默认300*150

          1.通过css设置canvas大小，只是设置了 canvas元素本身
          2.在canvas标签内直接定义width和height，是同时定义元素本身大小和元素绘图表面大小。
          3.通过JS来定义与在canvas标签内定义效果是一样的。
     
      
        所以要设置元素绘图表面 宽高 需要：
        const canvas = document.getElementById('myCanvas')
        const bg = document.getElementsByClassName('bg')[0] 
        canvas.width = bg.clientWidth
        canvas.height = bg.clientHeight
        


      2.canvas本身画图片背景失败，所以现在是图片和canvas 定位，这样显示


     -->
    <div class="bg"></div>
    <canvas id="myCanvas" width="500px" height="500px"></canvas>
  </div>
</template>
<script>
  export default {
    data () {
      return {
      }
    },
    mounted() {
      var canvas=document.getElementById('myCanvas');
      var ctx=canvas.getContext('2d');
     
      // 画矩形
      ctx.fillStyle='pink';
      ctx.fillRect(20,20,180,180); //(x,y,width,height)
      // 画1矩形边框
      ctx.strokeStyle = "blue";
      ctx.strokeRect(20,20,180,180);

      // 画2矩形边框
      ctx.strokeStyle = "red";
      ctx.strokeRect(100,250,180,180);

      // 画3矩形边框 -126  
      ctx.strokeStyle = "#fff";
      ctx.strokeRect(0,499,137,-126);
      

    }
  }
</script>
<style scoped>
.box{
  width: 100%;
  height: 100%;
  position: relative;
}
.bg{
  width: 500px;
  height: 500px;
  background: url('../assets/123.png');
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  /* z-index: 10; */
}
canvas{
  /* z-index: 120; */
  position: absolute;
  top: 0;
  left: 0;
}

</style>