javascript - 使用 JS 和 Canvas 创建网站构建器

Question

我目前正在创建一个网站构建器，以便用户可以将元素拖放到页面上并调整元素大小和修改颜色等。

我想知道它是否可以通过 HTML5 Canvas 完成，以便可以拖动事件等等，然后当用户对 Canvas 中的这个 View 感到满意时，我可以以某种方式将这个 Canvas 绘图转换为 HTML 和 CSS。这可能吗？

如果是怎么办？谁能给我指出这方面的任何例子？或者有什么更好的方法吗？

Answer 1

通常，当您发现针对线框等执行此操作的应用程序时，它们不会生成非常有用的 HTML。虽然不确定您的确切意图:

1 使用 Canvas :

看http://www.kineticjs.com/用于向您在 Canvas 上绘制的元素添加事件、调整大小和移动元素。虽然将 canvas 转换为 html 并不是一件容易的事，事实上，我假设你几乎只会以第 2 点结束。

2 使用纯 html/css/js:

您将 position: absolute 添加到每个元素，这样一切都可以被拖动，您可以指定 z-index 来指定它是显示在另一个元素的上方还是下方。您可以很容易地复制 HTML，因为它只是复制当前源代码。然而，如果这应该被用作生成体面 html 的方式，有人会在他们的网站上实际使用，而不仅仅是作为线框/模型，那么这种方法就不会很好。

我无法想象您可以纯粹使用设计器来制作可维护且整洁的 HTML 的情况。