JavaScript Canvas: 固定点等比例缩放矩形 (按住 Shift 键)

您可以通过以下步骤在 JavaScript 的 canvas 中实现固定一个点并按住 Shift 键进行等比例缩放的矩形：\n\n1. 创建一个 canvas 元素：\nhtml\n<canvas id="myCanvas"></canvas>\n\n\n2. 获取 canvas 元素的上下文：\njavascript\nvar canvas = document.getElementById("myCanvas");\nvar ctx = canvas.getContext("2d");\n\n\n3. 定义矩形的初始位置和尺寸：\njavascript\nvar rect = {\n x: 50,\n y: 50,\n width: 100,\n height: 100\n};\n\n\n4. 监听鼠标按下和松开事件：\njavascript\nvar isDragging = false;\nvar startX, startY;\n\ncanvas.addEventListener("mousedown", function(e) {\n startX = e.clientX;\n startY = e.clientY;\n isDragging = true;\n});\n\ncanvas.addEventListener("mouseup", function() {\n isDragging = false;\n});\n\n\n5. 监听鼠标移动事件，判断是否按住 Shift 键并进行等比例缩放：\njavascript\ncanvas.addEventListener("mousemove", function(e) {\n if (!isDragging) {\n return;\n }\n\n var deltaX = e.clientX - startX;\n var deltaY = e.clientY - startY;\n\n if (e.shiftKey) {\n var scale = Math.abs(deltaX) > Math.abs(deltaY) ? Math.abs(deltaX) : Math.abs(deltaY);\n if (deltaX < 0) {\n scale = -scale;\n }\n\n rect.width += scale;\n rect.height += scale;\n } else {\n rect.x += deltaX;\n rect.y += deltaY;\n }\n\n startX = e.clientX;\n startY = e.clientY;\n\n drawRect();\n});\n\n\n6. 定义一个绘制矩形的函数：\njavascript\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\n7. 调用绘制矩形的函数进行初始绘制：\njavascript\ndrawRect();\n\n\n这样，您就可以在 canvas 中实现固定一个点并按住 Shift 键进行等比例缩放的矩形了。