如何在javascript中获取鼠标绘制的矩形的宽度和高度

在JavaScript中获取鼠标绘制的矩形的宽度和高度，可以通过监听鼠标事件来实现。以下是一个简单的示例，展示了如何实现这一功能：

基础概念

鼠标事件：包括 mousedown, mousemove, 和 mouseup。
坐标获取：通过 event.clientX 和 event.clientY 获取鼠标在视口中的坐标。

实现步骤

初始化变量：记录起始点和结束点的坐标。
监听鼠标事件：在 mousedown 时记录起始点，在 mousemove 时更新结束点，在 mouseup 时计算宽度和高度。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draw Rectangle</title>
    <style>
        #canvas {
            width: 100%;
            height: 400px;
            border: 1px solid black;
            position: relative;
        }
        .rectangle {
            position: absolute;
            border: 1px dashed red;
        }
    </style>
</head>
<body>
    <div id="canvas"></div>
    <script>
        let startX, startY, endX, endY;
        const canvas = document.getElementById('canvas');

        canvas.addEventListener('mousedown', (event) => {
            startX = event.clientX;
            startY = event.clientY;
            const rect = document.createElement('div');
            rect.classList.add('rectangle');
            canvas.appendChild(rect);
        });

        canvas.addEventListener('mousemove', (event) => {
            if (startX && startY) {
                endX = event.clientX;
                endY = event.clientY;
                const rect = canvas.lastElementChild;
                rect.style.left = `${Math.min(startX, endX)}px`;
                rect.style.top = `${Math.min(startY, endY)}px`;
                rect.style.width = `${Math.abs(endX - startX)}px`;
                rect.style.height = `${Math.abs(endY - startY)}px`;
            }
        });

        canvas.addEventListener('mouseup', () => {
            if (startX && startY && endX && endY) {
                const width = Math.abs(endX - startX);
                const height = Math.abs(endY - startY);
                console.log(`Width: ${width}, Height: ${height}`);
                startX = startY = endX = endY = null;
            }
        });
    </script>
</body>
</html>

解释

HTML结构：一个 div 元素作为画布。
CSS样式：设置画布的基本样式和矩形的样式。
JavaScript逻辑：
- 在 mousedown 事件中记录起始点坐标，并创建一个新的 div 元素作为矩形。
- 在 mousemove 事件中更新矩形的结束点坐标，并动态调整矩形的位置和尺寸。
- 在 mouseup 事件中计算并输出矩形的宽度和高度，然后重置所有变量以便下一次绘制。