javascript - 在 HTML 页面上绘制矢量图形的最佳方法有哪些？

Question

我正在尝试使用线条和文本生成一些动态网页背景。

看看我在 http://74er.net/labs/lines.html 上的演示(只关注黄线)。

从字面上创建 <span> 是一种蹩脚且低效的方法具有 1 X 1 大小和黄色背景的元素，其 X、Y 位置基于椭圆公式。

我的要求是线条创建相当简单(或相当直接):

• 必须在客户端创建，而不是由服务器脚本生成的动态图像
• 可以根据简单的公式(圆、椭圆或直线)创建
• 可以包含在 DOM 元素中(例如 DIV，以便我可以将其分层作为背景)
• 没有 HTML5 canvas 技术(仅仅是因为它应该在不兼容 HTML5 的浏览器上呈现)
• 不像我当前的实现那样对浏览器造成太大负担

不需要:

• 非常平滑的曲线(尽管会受到欢迎)
• 点线/虚线(如果可行，我也会喜欢)

基于以上所述，我几乎可以肯定 SVG(使用 Raphaël )是可行的方法，但由于某些浏览器缺乏原生 SVG 支持，我被推迟了。

我看过Walter Zorns library ，并且内置了一些优秀的性能调优算法。因此，如果我找不到更有创意的实现方式，这将是我的选择。

如果您需要进一步说明，请告诉我。

Answer 1

早上好

我很喜欢使用 Dojo Toolkit 中的绘图功能。你可以在这里看到它的实际效果:

Dojo drawing example

要下载 Dojo，请访问:

Dojo Toolkit