这是一个创建于 2311 天前的主题，其中的信息可能已经有所发展或是发生改变。
如何最少代码，在 HTML 里用 DOM 元素画点与线?
一个 Point 就是一个二维点，有横纵坐标 x 与 y 两个属性，
一个 Line 就是 2 个 Point 相连，
我现在有一堆这样的 Point 点和 Line 线对象，要生成 HTML 文本，使用 DOM 的方式来体现。
现在想法是一个 div 当 Point,硬编码 style 里 position 为 absolute，然后改 left 和 top 的值
对于如何用 dom 画线我还不知道，怎么做？
 |
1
per 2018-08-02 14:29:07 +08:00 via iPhone  1
Canvas
|
 |
3
Sparetire 2018-08-02 14:30:57 +08:00 via Android 2
svg
|
 |
4
marcong95 2018-08-02 14:32:54 +08:00 1
html 内嵌 svg 了解一下
如果不想用 svg 就 absolute 的 div，设置 top left width border transform |
|
5
per 2018-08-02 14:39:52 +08:00 via iPhone
@zjsxwc 可以吧 https://stackoverflow.com/questions/28842520/click-on-line-in-canvas 我没试过。
如果自己做觉得麻烦可以用一下百度的 echarts，就是小需求的话有点大材小用了 |
 |
6
forgcode 2018-08-02 14:42:07 +08:00 via Android
设置 border 当线就可以！
|
 |
7
OSF2E 2018-08-02 15:49:48 +08:00
DOM + CSS3 2d 转换
|
 |
8
AlphaTr 2018-08-02 19:35:57 +08:00
推荐 canvas 的库 spritejs，可以画点和线，并对事件做响应~
|
|
9
OSF2E 2018-08-03 05:39:51 +08:00
画直线的原理就是将 DOM 元素利用 CSS3 的 transform 属性中的 rotate 方法进行旋转，可以自定义“线段”的两个点的坐标以及“线段长度”以及“线段粗细”等样式。
抽空练手做了一个 demo，利用 DOM 和 CSS 画正多边形，多边形的边数可以自定义。 httpss://tuhui.coding.me/data-visualization-engine/ |
 |
10
weixiangzhe 2018-08-03 08:43:28 +08:00 via iPhone
svg 啊😯
|
 |
11
zhzer 2018-08-03 14:27:41 +08:00
dom 就不是这么用的....
|
Select Language