用js绘制可视化矩形并获取矩形坐标
时间: 2023-11-28 08:50:06 浏览: 30
要用 JS 绘制可视化矩形,可以使用 HTML5 的 Canvas 元素。下面是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制矩形</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var rect = {};
var drag = false;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#FF0000";
ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
}
canvas.addEventListener("mousedown", function(e) {
rect.startX = e.pageX - canvas.offsetLeft;
rect.startY = e.pageY - canvas.offsetTop;
drag = true;
});
canvas.addEventListener("mouseup", function(e) {
drag = false;
});
canvas.addEventListener("mousemove", function(e) {
if (drag) {
rect.w = (e.pageX - canvas.offsetLeft) - rect.startX;
rect.h = (e.pageY - canvas.offsetTop) - rect.startY;
draw();
}
});
</script>
</body>
</html>
```
这段代码会在页面上创建一个 400 x 400 的 Canvas 元素,并且监听鼠标事件,当用户按下鼠标左键并移动时,会绘制一个红色的矩形。你可以通过鼠标拖动来改变矩形的大小和位置。
要获取矩形的坐标,只需要在鼠标松开的事件处理函数中,打印出 rect 对象的值即可:
```javascript
canvas.addEventListener("mouseup", function(e) {
drag = false;
console.log(rect);
});
```
这样就可以在控制台中看到 rect 对象的 startX、startY、w 和 h 属性,它们分别表示矩形左上角的坐标和宽度、高度。