javascript - 在javascript中用div绘图

标签 javascript drawing html

在我学习 javascript 的过程中(这似乎是我最近的 SO 问题来源)我找到了这个用于绘图的 API http://www.c-point.com/javascript_vector_draw.htm

与此同时,我一直在对图形进行一些实验,这些图形往往会占用大量要绘制的内容。这家伙是用div画的,图片的每一个正方形部分都是一个div。您可以通过在页面上检查他的示例轻松地检查它。

他去制作div 1px/1px来画一个像素

现在我要问的是:

这是最好的方法吗?当绘图更精细时,它看起来很重。您还建议使用哪些其他方法?

Javascript drawing library?已经有几个指向库的链接,因此无需在此处放置任何链接。

我在这里看到了关于绘图的其他问题。我只是想知道用 div 绘图在哪一点上并不糟糕!

最佳答案

用于矢量绘图,像Raphael 这样的库通过 SVG 和 VML 提供一致的 API。

对于光栅绘图,对于支持 Canvas 的浏览器,您可以使用

对于 IE,您将默认使用 DIVS 或让您的绘图 API 使用 silverlight(如果可用)。请注意,为了提高效率,div 不应为 1px x 1px,而是根据您正在绘制的形状所需的长度。 20 个相同颜色的 1 像素 div 应该是 1 个 20 像素宽的 div。通常,您不会与 div 方法进行很好的交互,因为您所针对的浏览器 (IE) 的 DOM 访问速度很慢

编辑:链接库确实进行了 div 优化。

对于纯 HTML 解决方案(无 SVG/VML/canvas),您 use css and custom border-widths:

关于javascript - 在javascript中用div绘图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/354014/

相关文章:

javascript - 附加按钮值或在选中/取消选中时将其从 div 中删除

JavaScript 窗口选项

javascript - 通过将数据存储在类变量中来间接更改 UI 不起作用

Android:如何使屏幕的多个部分无效

ios - 使用 UITableViewCell 绘制条形图 - 单元格可变地部分填充颜色

Javascript URL 查询字符串逻辑

JavaFX:通过点击两次鼠标在 Canvas 上绘制一个矩形

php - 高级自定义字段 - 添加 Linkedin

html - CSS 媒体查询文本

html - 将 CSS 转换为 HTML