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

Question

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

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

Answer 1

您有两个主要选择：

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

这里有一些关于这两个的教程：

• http://svgtutorial.com/manipulating-svg-with-javascript/
• https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

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

• https://d3js.org/
• http://dmitrybaranovskiy.github.io/raphael/
• http://fabricjs.com/
• http://paperjs.org/

这是一个简单的画布示例：

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>