在笛卡尔坐标系中绘制矩形

Question

我想在JavaScript中绘制如下图表。基本上，目标是在笛卡尔坐标系中绘制一些矩形。每个矩形可以用4个点表示，给出坐标。

有谁知道怎么画吗？有图书馆可以这样做吗？理想情况下，我希望可以稍微调整一些示例代码，而不是从头开始绘制所有内容。

Answer 1

您有两个主要选择：

SVG - 与 HTML 非常相似的矢量图形（您的元素具有属性等）。您还可以使用 CSS 来设置 SVG 的样式。
canvas - 这基本上是一个可以用 JS 绘制的位图。
(HTML) - 当然你也可以使用简单的 HTML + CSS.

以下是关于这两个的一些教程：

有很多第三方库可以帮助解决这个问题，例如：

这里是 canvas 的简单示例：

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

ctx.strokeRect(0, 0, 400, 200);
ctx.strokeRect(0, 200 - 20, 20, 20);
ctx.strokeRect(30, 200 - 70, 20, 70);

<canvas id="canvas" width="400" height="400"></canvas>

在笛卡尔坐标系中绘制矩形

Draw rectangles in a cartesian coordinate system

javascript

canvas

charts

data-visualization

coordinate-systems