JS Canvas 矩形等比例缩放：使用 Shift 键实现

"""\n// 获取Canvas元素和上下文\nconst canvas = document.getElementById('canvas');\nconst ctx = canvas.getContext('2d');\n\n// 矩形的初始位置和大小\nlet rect = {\n x: 50,\n y: 50,\n width: 100,\n height: 100\n};\n\n// 监听键盘按下和抬起事件\nlet shiftPressed = false;\ndocument.addEventListener('keydown', function(event) {\n if (event.key === 'Shift') {\n shiftPressed = true;\n }\n});\n\ndocument.addEventListener('keyup', function(event) {\n if (event.key === 'Shift') {\n shiftPressed = false;\n }\n});\n\n// 绘制矩形\nfunction drawRect() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n \n // 如果Shift键被按下，则计算缩放比例\n let scale = shiftPressed ? rect.width / rect.height : 1;\n \n // 缩放画布\n ctx.scale(scale, scale);\n \n // 绘制矩形\n ctx.fillRect(rect.x, rect.y, rect.width, rect.height);\n \n // 恢复画布缩放\n ctx.setTransform(1, 0, 0, 1, 0, 0);\n}\n\n// 初始化\nfunction init() {\n drawRect();\n}\n\ninit();\n"""\n在上面的示例中，我们监听了键盘的按下和抬起事件，并通过shiftPressed变量来保存Shift键的状态。在绘制矩形时，我们通过判断shiftPressed的值来决定是否进行等比例缩放。如果Shift键被按下，我们计算矩形的宽高比并将画布进行相应的缩放，然后绘制矩形。最后，我们通过调用setTransform方法恢复画布的缩放。\n\n你可以将上面的代码添加到HTML文件中，并在Canvas上绘制矩形。然后，按住Shift键并拖动矩形，你会发现矩形会按四周等比例缩放。