JavaScript Canvas 拖动缩放：实现宽高动态调整

"JavaScript Canvas 拖动缩放：实现宽高动态调整" "学习如何使用 JavaScript Canvas API 实现拖动和缩放，动态调整画布的宽度和高度。本文提供详细步骤和代码示例，并讲解如何使用鼠标事件监听器和重绘函数完成操作。" "Canvas, JavaScript, 拖动, 缩放, 宽高, 动态调整, 鼠标事件, 重绘, 代码示例" "要实现在 JavaScript 的 Canvas 中拖动和缩放宽高，可以使用以下步骤：\n\n1. 在 HTML 中创建一个 Canvas 元素，并给它一个唯一的 id：\nhtml\n<canvas id=\"myCanvas\"</canvas>\n\n\n2. 在 JavaScript 中获取 Canvas 元素，并设置宽度和高度：\njavascript\nconst canvas = document.getElementById('myCanvas');\nconst ctx = canvas.getContext('2d');\ncanvas.width = 500;\ncanvas.height = 500;\n\n\n3. 创建一个变量来存储 Canvas 的当前宽度和高度：\njavascript\nlet canvasWidth = canvas.width;\nlet canvasHeight = canvas.height;\n\n\n4. 创建变量来存储鼠标的起始位置和 Canvas 的起始宽度和高度：\njavascript\nlet startX, startY, startWidth, startHeight;\n\n\n5. 添加鼠标事件监听器来实现拖动和缩放效果：\njavascript\ncanvas.addEventListener('mousedown', handleMouseDown);\ncanvas.addEventListener('mousemove', handleMouseMove);\ncanvas.addEventListener('mouseup', handleMouseUp);\n\nfunction handleMouseDown(event) {\n startX = event.offsetX;\n startY = event.offsetY;\n startWidth = canvasWidth;\n startHeight = canvasHeight;\n}\n\nfunction handleMouseMove(event) {\n if (event.buttons === 1) {\n const offsetX = event.offsetX - startX;\n const offsetY = event.offsetY - startY;\n canvasWidth = startWidth + offsetX;\n canvasHeight = startHeight + offsetY;\n redrawCanvas();\n }\n}\n\nfunction handleMouseUp() {\n // 可以在这里保存最终的宽度和高度\n}\n\nfunction redrawCanvas() {\n // 清空 Canvas\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n \n // 设置新的宽度和高度\n canvas.width = canvasWidth;\n canvas.height = canvasHeight;\n \n // 重新绘制内容\n // ...\n}\n\n\n6. 在 redrawCanvas 函数中重新绘制你的内容，例如绘制一个矩形：\njavascript\nfunction redrawCanvas() {\n // ...\n\n // 绘制矩形\n ctx.fillStyle = 'red';\n ctx.fillRect(0, 0, canvasWidth, canvasHeight);\n}\n\n\n现在，当你在 Canvas 上按下鼠标并拖动时，Canvas 的宽度和高度会随着鼠标移动而改变，同时会重新绘制内容。\n