html事件改变矩形大小的方法

可以使用 HTML5 中的`<canvas>`标签来绘制矩形，并使用 JavaScript 中的事件监听器来监听

鼠标的移动和点击事件，从而实现改变矩形大小的效果。

下面是一个简单的示例代码，可以在鼠标按下并移动时实时改变矩形的大小：

HTML 部分：

```

<canvas id="myCanvas" width="500" height="500" onmousedown="startDragging(event)"

onmousemove="dragging(event)" onmouseup="stopDragging(event)"></canvas>

```

JavaScript 部分：

function drawRect() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = "blue";

ctx.fillRect(rect.x, rect.y, rect.width, rect.height);

}

function startDragging(event) {

isDragging = true;

dragOffsetX = event.clientX - rect.x;

dragOffsetY = event.clientY - rect.y;

}

}

if (newHeight > 0) {

rect.height = newHeight;

}

drawRect();

}

}