在HTML页面上绘制矢量图形的最佳方法是什么?

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

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

这是一个蹩脚和低效的方法,通过字面上创造一个 <span> 元素的大小为1 x 1,背景为黄色,x,y位置基于Ellispe公式。

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

• 必须在客户端创建,而不是由服务器脚本生成的动态图像
• 可以基于一个简单的公式(圆、埃利斯或直线)创建
• 可以包含在一个dom元素中(例如,div,以便我可以将其作为背景分层)
• 没有HTML5画布技术(只是因为它应该在不兼容HTML5的浏览器上呈现)
• 不像我目前的实现那样,对浏览器征税不多

不需要:

• 非常平滑的曲线(尽管会受到欢迎)
• 虚线/虚线(如果可行,我也希望如此)

基于以上,我几乎可以确定SVG Raphaël )这是一条很好的路,但我被一些浏览器中缺乏本地SVG支持所拖累。

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

如果需要进一步澄清,请通知我。