画布与 SVG（交互式应用程序）[关闭]答案

【问题标题】：Canvas vs SVG (interactive application) [closed]画布与 SVG（交互式应用程序）[关闭]
【发布时间】：2026-01-28 01:20:06
【问题描述】：

我应该为我的项目使用什么？在我的应用程序中，我生成了表格，1/2 的单元格对于国际象棋来说是可点击的，并且每个单元格都是独立的（ID 按位置 XY）。在这些单元格中会有类似于二极管 LED 的圆圈（所以它会有一些模糊、渐变等），我放了一些数据-*。我还想从文件中绘制图像作为我的表格的掩码，调整表格的大小，更改所有红色 LED 的颜色等。我应该使用SVG 还是canvas？现在我使用 html DOM，但它太慢了。

【问题讨论】：

在考虑采用其他技术之前，您应该分析您的应用程序并找出实际的性能问题。
如果您需要大量交互并且对这类东西不熟悉，我会选择 SVG，因为编程交互更像是 DOM，就像 SVG 一样，但这只是我的看法。
主要交互将改变单元格的颜色/类型。我选择颜色->单击单元格->更改颜色。如果您说 SVG 与 DOM 相似，那么在我的单元格中保存数据是否容易？我有 450 到 7200 个细胞。

标签： javascript html canvas svg

【解决方案1】：

您的第一步应该是分析您现有的 HTML 代码以找出它运行缓慢的原因。包含 7200 个单元格的表格不必很慢。五年前，我有 2 MB 原始 HTML 的表格，浏览器会在不到 2 秒的时间内呈现它们。

canvas 或 SVG 都不会神奇地为您解决性能问题。

【讨论】：

我认为 SVG/Canvas 在较低分辨率下的可扩展性会更好，例如在 iPhone、android 等上，而不是我的填充图像作为单元格的背景。

很可能会使用相同的 3D 硬件来缩放整个页面。