用js绘制可视化矩形并获取矩形坐标

你可以使用 HTML5 canvas 元素和 JavaScript 来实现绘制可视化矩形并获取矩形坐标。

1. 在 HTML 代码中创建 canvas 元素：

<canvas id="myCanvas" width="500" height="500"></canvas>

2. 在 JavaScript 代码中获取 canvas 元素并设置绘图环境：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

3. 使用 `fillRect` 方法在 canvas 上绘制矩形：

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

4. 在鼠标事件（例如 mousedown、mousemove、mouseup）中获取鼠标的坐标位置：

canvas.addEventListener("mousedown", function(event) {
  var x = event.clientX - canvas.offsetLeft;
  var y = event.clientY - canvas.offsetTop;
  // 使用 x 和 y 坐标绘制矩形
});

现在你已经可以在 canvas 上绘制矩形并获取矩形坐标了。