<template>
  <div>
    <canvas ref="canvas" width="800" height="600"></canvas>
  </div>
</template>

  <script>
export default {
  name: "Canvas",

  mounted() {

    let canvas = this.$refs.canvas; //获取画布元素，以便在下面的代码中使用它来绘图。

    let ctx = canvas.getContext("2d"); //获取上下文，以便在下面的代码中使用它来绘图。

    // 画12个长方形货架，每行4个，3行  
    for (let i = 0; i < 3; i++) {//循环3次（3行）   ；i=0,1,2   每一行的x坐标都是100开始   每一行的y坐标都有i*150的间隔 即 y=0+i*150 , y=150+i*150 , y=300+i*150 ; 即y= 150*(i+1) ;     所以y坐标也就可以写成 150*(i+1) ;      每一列的x坐标间隔是200 ；即 x=100 + j *200 , x = 300 + j *200 , x = 500 + j *200 ;即 x = 200 * (j + 1);   所以x坐标也就可以写成 200 * (j + 1);     width 和height 都是100px;        记住上面这些公式之后就不用把所有数字都写出来了。

      for (let j = 0; j < 4; j++) {//循环4次 （4列）   ；j=0,1,2,3       

        ctx.fillStyle="#F7F7F7";//设定填充颜色