并在该货架上显示一个文本框`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 ,shelfPositionsi,shelfPositionsi); } } // 监听卡车位置变化 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;ishelvesPostions i&& x < shelvesPostions i&& y > shelvesPostions i&& y < shelvesPostions i){ drawTextBoxAtShelf(shelvesPostions [i]); break; } } } }); // 绘制某个特定的文本框 function drawTextBoxAtShelf (position){ ctx .fillStyle="#FF0000"; ctx .fillRect (position[0],position[1], position[2]-position[0], position[3]-position