Question

我喜欢在HTML页面中绘图。该图可能包含点，线，多边形，圆形，日食等。这是最好的方法。我希望解决方案在网站上加载速度非常快。你能用一个例子来帮我解决一个例子

吗？

Answer 1

使用SVG (Scalable Vector Graphic)。它正是您正在寻找的，甚至更多。

＆＃13;

<svg width="500" height="200">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  <rect x="100" y="10" width="50" height="50" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
  <ellipse cx="250" cy="60" rx="100" ry="50" style="fill: yellow; stroke:purple; stroke-width: 2" />
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
  <text x="200" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>

＆＃13;

Answer 2

如果您想要显示已经绘制的内容，普通SVG是一个很好的解决方案。

另一方面，如果您希望用户自己绘图，那么使用用于绘制图表的库会更容易。这样的库可以在内部使用SVG或Canvas，这并不重要，因为这一点不需要学习SVG或Canvas。

这样一个库的一个例子是我创建的，GoJS。请参阅http://gojs.net/latest/samples/index.html上的示例。

html页面中的绘图图

2 个答案: