如何最少代码，在 HTML 里用 DOM 元素画点与线?

[zjsxwc]

如何最少代码，在 HTML 里用 DOM 元素画点与线?

一个 Point 就是一个二维点，有横纵坐标 x 与 y 两个属性，

一个 Line 就是 2 个 Point 相连，

我现在有一堆这样的 Point 点和 Line 线对象，要生成 HTML 文本，使用 DOM 的方式来体现。

现在想法是一个 div 当 Point,硬编码 style 里 position 为 absolute，然后改 left 和 top 的值

对于如何用 dom 画线我还不知道，怎么做？

[per]

Canvas

[zjsxwc]

@per

canvas 能不能监听到 点击线 的事件？

[Sparetire]

svg

[marcong95]

html 内嵌 svg 了解一下

如果不想用 svg 就 absolute 的 div，设置 top left width border transform

[per]

@zjsxwc 可以吧 https://stackoverflow.com/questions/28842520/click-on-line-in-canvas 我没试过。
如果自己做觉得麻烦可以用一下百度的 echarts，就是小需求的话有点大材小用了

[forgcode]

设置 border 当线就可以！

[OSF2E]

DOM + CSS3 2d 转换

[AlphaTr]

推荐 canvas 的库 spritejs，可以画点和线，并对事件做响应~

[OSF2E]

画直线的原理就是将 DOM 元素利用 CSS3 的 transform 属性中的 rotate 方法进行旋转，可以自定义“线段”的两个点的坐标以及“线段长度”以及“线段粗细”等样式。

抽空练手做了一个 demo，利用 DOM 和 CSS 画正多边形，多边形的边数可以自定义。
httpss://tuhui.coding.me/data-visualization-engine/

[weixiangzhe]

svg 啊😯

[zhzer]

dom 就不是这么用的....