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

标签 javascript html line vector-graphics

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

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

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

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

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

不需要:

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

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

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

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

最佳答案

早上好

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

Dojo drawing example

要下载 Dojo,请访问:

Dojo Toolkit

关于javascript - 在 HTML 页面上绘制矢量图形的最佳方法有哪些?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2080222/

相关文章:

javascript - 如果元素有类,是否可以在 CSS 中禁用悬停事件?

r - 连接散点图中的所有点(可能的组合)

javascript - 如何在 Typescript 中指定对象上允许的键/值组合

html - 屏幕阅读器如何处理 display flex?

javascript - 如何根据js或moment js中的日期忽略时间来比较两个时间戳值?

javascript - 标签与输入框间距

matlab - 在 MATLAB 中存储由 imline 生成的对象的句柄

jquery - 如何在 JqGrid 中显示行号?

javascript - prototype.constructor 和 object of itself 有什么区别?

javascript - 在 php 数据表中为谷歌图表自定义 html 工具提示添加属性