Canvas 拖动矩形：使用 Shift 键实现等比例缩放 - 详细指南

要实现在canvas中拖动矩形并按住Shift键进行等比例缩放，你可以按照以下步骤操作：\n\n1. 在HTML中创建一个canvas元素，并为其指定一个id属性，例如：\nhtml\n<canvas id="myCanvas" width="500" height="500"></canvas>\n\n2. 在JavaScript中获取canvas元素和绘图上下文，并为canvas元素添加mousedown、mousemove和mouseup事件监听器，如下所示：\njavascript\nconst canvas = document.getElementById('myCanvas');\nconst ctx = canvas.getContext('2d');\n\nlet rect = {\n x: 100, // 矩形左上角的x坐标\n y: 100, // 矩形左上角的y坐标\n width: 100, // 矩形的宽度\n height: 100 // 矩形的高度\n};\n\nlet isDragging = false;\nlet startX, startY;\n\ncanvas.addEventListener('mousedown', function(e) {\n const { offsetX, offsetY } = e;\n startX = offsetX;\n startY = offsetY;\n isDragging = true;\n});\n\ncanvas.addEventListener('mousemove', function(e) {\n if (!isDragging) return;\n \n const { offsetX, offsetY, shiftKey } = e;\n const dx = offsetX - startX;\n const dy = offsetY - startY;\n \n if (shiftKey) {\n const scale = Math.max(dx / rect.width, dy / rect.height);\n rect.width *= scale;\n rect.height *= scale;\n } else {\n rect.x += dx;\n rect.y += dy;\n }\n \n startX = offsetX;\n startY = offsetY;\n \n drawRect();\n});\n\ncanvas.addEventListener('mouseup', function() {\n isDragging = false;\n});\n\nfunction drawRect() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.fillRect(rect.x, rect.y, rect.width, rect.height);\n}\n\n在上述代码中，我们使用rect对象来表示矩形的位置和大小。当鼠标按下时，记录当前鼠标的位置并设置isDragging为true；当鼠标移动时，根据鼠标的偏移量计算矩形的新位置或新大小，并根据Shift键的状态来决定是移动还是缩放矩形；当鼠标释放时，将isDragging设置为false。最后，我们使用drawRect函数来绘制矩形。\n\n通过上述代码，你可以在canvas中拖动矩形，并按住Shift键进行等比例缩放。