canvas中有12个货架和张卡车图片，当卡车图片的坐标移动到某货架的位置时，使其通道打开

并在该货架上显示一个文本框```javascript // 获取canvas元素 let canvas = document.getElementById('myCanvas'); let ctx = canvas.getContext('2d'); // 加载图片资源 let truckImg = new Image(); truckImg.src = 'truck.png'; let shelfImg = new Image(); shelfImg.src = 'shelf.png'; // 定义卡车和货架的位置坐标数组 let truckPositions = [100,200]; // 卡车的x,y坐标 let shelfPositions=[[50,50],[150,50],[250,50], [50,150],[150,150],[250,150], [50,250],[150,250],[250,250], [350,350]]; // 货架的x1、y1、x2、y2坐标数组 // 绘制卡车和货架图片 truckImg.onload=function(){ ctx.drawImage(truckImg ,truckPositions[0],truckPositions[1]); } shelfImg.onload=function(){ for(var i=0;i<shelfPositions.length;i++){ ctx.drawImage(shelfImg ,shelfPositions[i][0],shelfPositions[i][1]); } } // 监听卡车位置变化 window.addEventListener('mousemove',function (e) { let x=e.clientX-canvasLeft; let y=e.clientY-canvasTop; if(x>truckPosition[0] && x< (truckPosition[0]+100) && y>truckPosition[1] && y< (truckPosition[1]+100)){ for(var i=0;i<shelvesPostions .length ;i++){ if(x>shelvesPostions [i][0]&& x < shelvesPostions [i][2]&& y > shelvesPostions [i][1]&& y < shelvesPostions [i][3]){ drawTextBoxAtShelf(shelvesPostions [i]); break; } } } }); // 绘制某个特定的文本框 function drawTextBoxAtShelf (position){ ctx .fillStyle="#FF0000"; ctx .fillRect (position[0],position[1], position[2]-position[0], position[3]-position