JS Canvas 图片框选裁剪：多个 Canvas 实现鼠标交互功能

要实现这个功能，你可以按照以下步骤进行操作：\n\n1. 创建多个canvas元素，并为每个canvas设置不同的id和相应的图片。\nhtml\n<canvas id="canvas1" width="400" height="300"></canvas>\n<canvas id="canvas2" width="400" height="300"></canvas>\n<canvas id="canvas3" width="400" height="300"></canvas>\n\n\n2. 使用JavaScript获取canvas元素，并为每个canvas绑定鼠标事件监听器。\njavascript\nvar canvas1 = document.getElementById('canvas1');\nvar canvas2 = document.getElementById('canvas2');\nvar canvas3 = document.getElementById('canvas3');\n\ncanvas1.addEventListener('mousedown', handleMouseDown);\ncanvas1.addEventListener('mousemove', handleMouseMove);\ncanvas1.addEventListener('mouseup', handleMouseUp);\n\ncanvas2.addEventListener('mousedown', handleMouseDown);\ncanvas2.addEventListener('mousemove', handleMouseMove);\ncanvas2.addEventListener('mouseup', handleMouseUp);\n\ncanvas3.addEventListener('mousedown', handleMouseDown);\ncanvas3.addEventListener('mousemove', handleMouseMove);\ncanvas3.addEventListener('mouseup', handleMouseUp);\n\n\n3. 在鼠标事件监听器中实现框选功能。记录鼠标按下时的初始位置，并在移动过程中绘制红色框。\njavascript\nvar startX, startY, isMouseDown = false;\n\nfunction handleMouseDown(event) {\n isMouseDown = true;\n startX = event.offsetX;\n startY = event.offsetY;\n}\n\nfunction handleMouseMove(event) {\n if (isMouseDown) {\n var currentX = event.offsetX;\n var currentY = event.offsetY;\n var width = currentX - startX;\n var height = currentY - startY;\n\n // 清除之前的绘制\n context.clearRect(0, 0, canvas.width, canvas.height);\n\n // 绘制红色框\n context.strokeStyle = 'red';\n context.strokeRect(startX, startY, width, height);\n }\n}\n\nfunction handleMouseUp(event) {\n isMouseDown = false;\n\n // 获取裁剪后的图片\n var image = new Image();\n image.src = canvas.toDataURL('image/png');\n document.body.appendChild(image);\n}\n\n\n注意：上述代码中的context是指当前canvas的上下文对象，你需要在适当的位置获取它。\n\n这样，当你按下鼠标并进行框选时，会在每个canvas上显示一个红色框，当松开鼠标时，会将框选区域内的图片裁剪并显示出来。你可以根据需要修改代码以适应你的具体情况。