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

{/'title/':/'JS Canvas 等比例缩放矩形：按住 Shift 键实现/',/'description/':/'本教程将教你如何使用 JavaScript Canvas 实现按住 Shift 键等比例缩放矩形的功能。通过鼠标事件监听器和简单的数学计算，你可以轻松地控制矩形的尺寸，使其在保持比例的同时进行缩放。/',/'keywords/':/'JS Canvas, 矩形, 等比例缩放, 按住 Shift 键, 鼠标事件, JavaScript, HTML, CSS/',/'content/':/'要实现在按住 Shift 键的同时，按住鼠标拖动可以等比例缩放矩形的功能，可以按照以下步骤进行：//n//n1. 在 HTML 文件中创建一个 Canvas 元素，并为其指定一个 id，如下所示：//nhtml//n<canvas id=///'myCanvas///'>//n</canvas>//n//n//n2. 在 JavaScript 文件中获取 Canvas 元素，并设置其宽度和高度，以及获取 2D 上下文，如下所示：//njavascript//nconst canvas = document.getElementById(///'myCanvas///');//ncanvas.width = window.innerWidth;//ncanvas.height = window.innerHeight;//nconst ctx = canvas.getContext(///'2d///');//n//n//n3. 创建一个矩形对象，并设置其初始位置和大小，以及一个变量 isDragging 来表示是否正在拖动矩形，如下所示：//njavascript//nconst rect = {//n x: 100,//n y: 100,//n width: 200,//n height: 100//n};//nlet isDragging = false;//n//n//n4. 添加鼠标事件监听器，处理鼠标按下、移动和释放事件，如下所示：//njavascript//ncanvas.addEventListener(///'mousedown///', handleMouseDown);//ncanvas.addEventListener(///'mousemove///', handleMouseMove);//ncanvas.addEventListener(///'mouseup///', handleMouseUp);//n//n//n5. 在 handleMouseDown 函数中，判断鼠标是否在矩形内部，如果是，则将 isDragging 设置为 true，如下所示：//njavascript//nfunction handleMouseDown(e) {//n const mouseX = e.clientX;//n const mouseY = e.clientY;//n //n if (mouseX >= rect.x && mouseX <= rect.x + rect.width && mouseY >= rect.y && mouseY <= rect.y + rect.height) {//n isDragging = true;//n }//n}//n//n//n6. 在 handleMouseMove 函数中，判断是否正在拖动矩形，如果是，则根据鼠标移动的距离来等比例地缩放矩形，如下所示：//njavascript//nfunction handleMouseMove(e) {//n if (isDragging) {//n const mouseX = e.clientX;//n const mouseY = e.clientY;//n //n const scaleX = (mouseX - rect.x) / rect.width;//n const scaleY = (mouseY - rect.y) / rect.height;//n //n rect.width *= scaleX;//n rect.height *= scaleY;//n }//n}//n//n//n7. 在 handleMouseUp 函数中，将 isDragging 设置为 false，表示停止拖动，如下所示：//njavascript//nfunction handleMouseUp(e) {//n isDragging = false;//n}//n//n//n8. 在 draw 函数中，绘制矩形，如下所示：//njavascript//nfunction draw() {//n ctx.clearRect(0, 0, canvas.width, canvas.height);//n //n ctx.fillStyle = ///'blue///';//n ctx.fillRect(rect.x, rect.y, rect.width, rect.height);//n //n requestAnimationFrame(draw);//n}//n//ndraw();//n//n//n现在，当你在 Canvas 上按住 Shift 键并拖动鼠标时，矩形将会等比例地缩放。/