vue中，请用canvas绘制12个长方形货架，2个叉车，且叉车可以移动

``` <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";//设定填充颜色 ctx.fillRect(200 * (j + 1), 150 * (i + 1), 100, 100);//fillRect()方法创建“实心”的矩形。fillRect(x, y, width, height) 画出12个正方形 这里要注意x、y、width、height都不能写数字而要使用上面得出的公式。 } } // 画2个叉车 let carX1 = 100;//carX1代表左侧叉车的x坐标 let carY1 = 300;//carY1代表左侧叉车的y坐标 let carX2 = 500;//carX2代表右侧叉车的x坐标 let carY2 = 450;//carY2代表左侧叉车的y坐标 ctx.fillStyle="#000000"; ctx.fillRect(carX1 - 40, carY1 - 20, 80, 40); //画出左侧叉车 ctx.fillStyle="#000000"; ctx.fillRect(carX2 - 40, carY2 - 20, 80