在 CANVAS 中创建整个网站怎么样？答案

【问题标题】：What about creating the whole website within a CANVAS?在 CANVAS 中创建整个网站怎么样？
【发布时间】：2012-08-09 07:18:18
【问题描述】：

我正在从头开始设计一个新网站，想知道在 <canvas> 元素中开发整个网站会有什么缺点。

我知道与 IE6/7/8 的兼容性问题，但这对这个项目并不重要。但我确实关心 Google 搜索引擎的行为和移动兼容性等。

我选择这种方式的主要原因是有可能在元素和图片上编写高级效果和动画，这是纯 HTML5/CSS 无法实现的。

【问题讨论】：

也许将与搜索引擎相关的文本内容作为常规 html 和您在画布上绘制的设计放在画布上？我的意思是，你当然不想在文本上制作视觉效果，因为没有人会读到它。但是你可能会在尝试重新发明轮子时遇到太多麻烦，比如制作流体/弹性布局？
没错，你明白我的意思。第一个想法是在巨大的 CANVAS 上创建一个浮动 HTML，在那里我可以编写一些背景效果，甚至复制任何 HTML 元素并在 CSS3/JS 限制之外对其进行动画处理。

标签： html canvas seo cross-browser

【解决方案1】：

Canvas 是用于光栅图形的元素。它适用于部分页面，但不适用于整个页面。页面是文档。它也需要是机器可读的。如果您的整个网站由画布组成，那么搜索引擎机器人、屏幕阅读器、浏览器插件和其他软件将无法访问它。使用画布创建网站就像使用绘图程序而不是文字处理器准备文档一样。这是可能的，但不切实际。对于实验来说可能是个好主意，但如果您是在生产环境中这样做，那么您应该重新考虑。

【讨论】：

考虑到搜索引擎机器人不会读取它，因此建议将 canvas 元素完全用于“网络应用程序”而不是“网站”。
是的，很多网络应用都输出到一个画布元素来显示数据

【解决方案2】：

这就像使用 WebGL 创建网站一样！我们使用它们来获得更好的视觉体验，但它们不适用于屏幕阅读器和爬虫。为了解决这个问题，我们可以为特定设备创建内容并将其隐藏在其他设备上。

【讨论】：

【解决方案3】：

我自己的网站是一个 Canvas 和一个大 Javascript（来自 Typescript），所以是的，它是可行的，它可以自动缩放以在手机上查看，还可以自动旋转...

如果你有兴趣：www.erroba.be（我名字的首字母缩写Er借给Robaye）

我相信您可以查看源代码并获得一些想法。

【讨论】：