V2EX = way to explore V2EX 是一个关于分享和探索的地方
Sign Up Now For Existing Member Sign In
请不要在回答技术问题时复制粘贴 AI 生成的内容
This topic created in 2827 days ago, the information mentioned may be changed or developed.
如何最少代码，在 HTML 里用 DOM 元素画点与线?
一个 Point 就是一个二维点，有横纵坐标 x 与 y 两个属性，
一个 Line 就是 2 个 Point 相连，
我现在有一堆这样的 Point 点和 Line 线对象，要生成 HTML 文本，使用 DOM 的方式来体现。
现在想法是一个 div 当 Point,硬编码 style 里 position 为 absolute，然后改 left 和 top 的值
对于如何用 dom 画线我还不知道，怎么做？
 | 1 per Aug 2, 2018 via iPhone  1 Canvas |
 | 3 Sparetire Aug 2, 2018 via Android 2 svg |
 | 4 marcong95 Aug 2, 2018 1 html 内嵌 svg 了解一下 如果不想用 svg 就 absolute 的 div，设置 top left width border transform |
| 5 per Aug 2, 2018 via iPhone @zjsxwc 可以吧 https://stackoverflow.com/questions/28842520/click-on-line-in-canvas 我没试过。 如果自己做觉得麻烦可以用一下百度的 echarts，就是小需求的话有点大材小用了 |
 | 6 forgcode Aug 2, 2018 via Android 设置 border 当线就可以！ |
 | 7 OSF2E Aug 2, 2018 DOM + CSS3 2d 转换 |
 | 8 AlphaTr Aug 2, 2018 推荐 canvas 的库 spritejs，可以画点和线，并对事件做响应~ |
| 9 OSF2E Aug 3, 2018 画直线的原理就是将 DOM 元素利用 CSS3 的 transform 属性中的 rotate 方法进行旋转，可以自定义“线段”的两个点的坐标以及“线段长度”以及“线段粗细”等样式。 抽空练手做了一个 demo，利用 DOM 和 CSS 画正多边形，多边形的边数可以自定义。 httpss://tuhui.coding.me/data-visualization-engine/ |
 | 10 weixiangzhe Aug 3, 2018 via iPhone svg 啊 |
 | 11 zhzer Aug 3, 2018 dom 就不是这么用的.... |
Select Language