JS Canvas 矩形等比例缩放：按住 Shift 键实现

"use strict";let canvas = document.getElementById("canvas");let ctx = canvas.getContext("2d");let rect = {x: 50, y: 50, width: 100, height: 50};let isDragging = false;let startX, startY;canvas.addEventListener("mousedown", function (event) {startX = event.offsetX;startY = event.offsetY;if (event.shiftKey) {isDragging = true;}});canvas.addEventListener("mousemove", function (event) {if (isDragging) {let dx = event.offsetX - startX;let dy = event.offsetY - startY;let scale = Math.max(Math.abs(dx) / rect.width, Math.abs(dy) / rect.height);rect.width *= scale;rect.height *= scale;startX = event.offsetX;startY = event.offsetY;ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.fillRect(rect.x, rect.y, rect.width, rect.height);}});canvas.addEventListener("mouseup", function () {isDragging = false;});在 HTML 中，需要有一个 id 为 "canvas" 的 canvas 元素。上述代码会在画布中绘制一个初始大小为 100x50 的矩形。按住 Shift 键并拖动鼠标时，矩形会按照鼠标移动的距离进行等比例缩放。注意：以上代码只是一个简单的示例，可能还需要根据实际需求进行适当的调整和优化。