我即将开始一个房间设计师项目的工作，这个项目允许你将墙/门/家具等拖放到网格上来设计一个房间。我已经决定拖放透明的PNG并绝对定位它们不会起作用，我不想使用flash，所以它是Canvas或SVG。
我：我以前从未使用过Canvas或SVG，但是我非常能胜任javascript和jQuery（我很好用OO Javascript，匿名函数，闭包，回调等）我读过道格拉斯·克罗克福德的“Javascript：The Good Parts”并了解其中的大部分内容; - ）
项目 - 需要从组件窗口拖放到设计器窗口，需要在平板电脑（而不是手机）上工作，因此触摸事件是一个问题。还需要工具提示，对象的分层等。如果我使用矢量图形，那么他们无论如何都需要有位图纹理（例如墙面板可能有壁纸纹理）
到目前为止，我已经阅读了一本关于Canvas的书，得出了以下结论......
帆布
SVG
所以，我需要很快解决如何做到这一点。现在我倾向于使用Canvas和一个好的库，因为我相信他们中的一些人可以导入SVG以获得可扩展性。
非常感谢任何有关哪个方向的建议。
答案 0 :(得分：5)
对于我的钱，我肯定会选择SVG（但我确实有更多的SVG经验）。它似乎是为3D渲染应用程序而制作的。首先，它是一个完整的DOM - 因此它为您处理渲染和z排序（无需任何重新绘制等），最重要的是 - 提供了大部分对象模型本身。使用canvas，您必须创建更多的内存模型来处理所有内容的呈现。使用SVG，您无需担心屏蔽，移动，变换，缩放或渲染任何内容。显然，如果物体在3D空间中相交/重叠，它会变得更加复杂 - 但这两种方法都是如此。至少SVG承担了你的大部分负担。
但是在表现方面，我无法肯定地说。这取决于你的应用程序在做什么。我不认为触摸事件应该是决定因素 - 你会找到一种方法，即使它意味着覆盖透明画布。 SVG是否支持触摸事件也可能取决于设备/浏览器 - 但我没有探究过这个。
但画布 - 那对你有什么用？这是一个位图，就是这样。无论如何，给我一个非常强大的DOM而不是一团记忆。
但这只是我的意见！ ： - ）
答案 1 :(得分：2)
我认为最好的解决方案是使用画布来表示网格和房间。然后对于房间里的物品，在画布上使用svg。如果您使用透明png文件作为家具，那么您根本不需要svg，但如果您使用svg，那么您可以扩展到更大，而不仅仅是稍大。
您将使用移动设备遇到的一个问题是内存问题，如果您在页面上有很多项目，并且它们是png，则可能是个问题。
如果您正在“拖放”但是在画布上执行此操作，那么您实际上并不需要javascript拖放库，只需处理触摸事件。
触摸事件的链接：http://www.html5canvastutorials.com/kineticjs/html5-canvas-mobile-events/
以及有关触摸事件的链接：Javascript Drag and drop for touch devices
答案 2 :(得分：2)
我不知道您的项目有多复杂，但您应该担心平板电脑的性能，因为正如我在iPad 2上进行的一些测试所看到的那样，使用一些混合了css和savascript触摸事件的svg转向不是那么负责任，而是一种明显的迟滞。
Canvas可能有更好的性能，但是，您需要为几乎所有内容编写管理脚本，例如存储处理鼠标坐标和地图对象的位置，并且您必须手动重绘每个更改。所以性能将主要取决于你的画布管理脚本的优化程度，我不确定是否已有任何库，答案可能是肯定的。
SGV正如其他人所说，它通常较慢，但这是因为，它没有呈现为普通的位图，它是一个矢量元素的DOM。它也很容易处理事件，你可以将事件附加到任何元素，（依赖于浏览器实现），你可以将css应用于样式，并且它易于更改位置，大小，笔触，填充等属性。To Tablets：如果你选择svg我会避免使用高分辨率纹理，不要使用css3 box-shadow来svg元素（使ipad非常滞后），我会避免使用jquery来操纵DOM并拖动放弃，而是在平板电脑上使用普通的javascript和非常优化的代码。