尽管DOM仍然完全主导着我们创建UI的方式，但创建一堆基于canvas的UI组件（例如按钮、列表、水平/垂直组等）是否有意义呢？
我确定会有很多缺点，但这样做可能有哪些优点呢？
首先，我想说，通常与canvas的视觉集成更加紧密。
创建基于画布的UI组件有意义吗？
51
- user802232
5
1这让我想起了几年前在Java中创建导航按钮的时尚。虽然有一些小优点，但缺点非常大。在我看来，这不是一个好主意。 - Tak
1@Tak…这是人们真正做过的事情吗？他们认为这是个好主意？！！ - Alex K
可能并不是什么大问题，但我猜需要使用屏幕阅读器的人无法“使用”该页面。 - Werner
尝试访问 https://bitbucket.org/nikola_l/visual-js，你可以找到在线示例... - Nikola Lukic
我真的很惊讶有多少答案认为这是一个好主意，实际上并不是。弊端非常大！ - Jonathan
8个回答
51
Zebra项目创建了一个完整的组件集，这些组件都被呈现在HTML5画布元素中。下面是组件示例的屏幕截图。我没有使用过这个框架，但这应该可以让您了解不同浏览器如何渲染UI组件。
旋转组件并检查线条渲染(抗锯齿)的质量，这取决于所使用的浏览器。以下是有关此问题的更多信息:
另一个项目是Makepad，它是基于WebGL worker的库和实时代码编辑器。UI的每个可见部分都是在WebGL中呈现的，包括屏幕上的所有文本，都通过集成的文本渲染引擎进行呈现。
该项目仍处于早期阶段，但您可以在此处尝试实时演示。Makepad是开源的，Git repo可以在github.com/makepad/makepad.github.io找到。
- raju-bitter
33
如果页面元素超过200个，使用Canvas作为UI基础是一个很好的选择。相比于使用DOM元素渲染，它的渲染速度要快得多。
在iPhone Safari上，300个动画DOM元素只能以3帧每秒的速度运行，非常缓慢。
如果您使用Canvas，则可以渲染超过300个元素并仍然实现30fps，这意味着平滑的动画和转换效果。我对此进行了长时间的测试，所以我知道它是可行的。
Canvas的缺点（正如其他人提到的），是搜索引擎无法看到您的内容。但是，如果您正在构建一个不应该被蜘蛛抓取并且需要在移动设备上运行的应用程序，则Canvas是最好的选择。
- nick fallon
2
2谁在乎搜索引擎无法在部署此类UI的上下文中查看您的内容呢？ - Alan B
好帖子。自渲染的优点是潜在的更快的性能，因为浏览器被构建为针对一般用例进行优化。 - Pacerier
25
是和否。
就页面UI的强调而言，如果网页导航和操作在JavaScript未启用时也能良好工作，那么这样做可能比较理想。
可以使用Canvas美化UI元素，但请记住，这些元素对于网络爬虫（如Google）或禁用脚本的用户来说是无法访问的。
否：
不要试图在Canvas中重新制作文本编辑。即使HTML Canvas规范也有一节章节强烈建议不要尝试在Canvas中创建文本编辑控件。
有长期的尝试和失败的历史（查找Mozilla Bespin）
我肯定会有很多缺点，但这样做的可能优势是什么？
是：
可视化效果（没有其他后备除了文本描述）和控件，如刻度盘（回退到某些HTML，例如滑块）可以极大地增强Canvas功能。
如果搜索Canvas控件、Canvas图表等，你会发现许多库提供类似的功能。但务必清楚，其中许多功能以无障碍性为代价。
可能：
可以使用Canvas为页面添加许多漂亮的元素。有些东西可以变得非常美丽，而不会在任何方面产生干扰或更改页面导航。也许网站的徽标会以过程化方式“增长”、发光或变得更加复杂。其他背景动画效果可能非常棒。
还有交互式图像，例如你想在网站上放置一个图表或分解图，以便检查某个物体的各个部分（化学结构、生物体、新车等）。图示和游戏等可视化交互媒体是Canvas的一些最佳用例。
- Simon Sarris
8
3尽管我同意你的大部分观点，但在某些情况下，这并不是那么明显。例如，如果您不需要全球访问您的用户界面（例如，对于纯内部应用程序），以及尼克·法伦在他的答案中提到的情况（如果您有很多项目并且必须在移动设备上运行） - 尤其是如果这些情况结合在一起（就像我的情况一样，在本地网络上严格运行具有潜在数千个单元格的浏览器内电子表格），Canvas绝对是一个可行的选择。 - Berislav Lopac
8谁说不能索引它？将所有元数据放入某些display:none元素中，然后创建完整的UI并利用WebGL，完全可以做到同时保持可索引性。 - trusktr
5需要菜单按钮的画布游戏怎么样？ - Josh
那些不需要谷歌爬取的应用程序怎么样呢？例如，看看谷歌协作文档背后的实现。你无法在一个输入文本上显示两个插入符号，唯一的方法是实现一个画布超级控件。 - jperelli
9未来将会证明这个答案是错误的。尽管需要时间，但浏览器对DOM和CSS的实现存在多样性将最终推动所有人走向更统一的UI系统。Flash的UI组件框架Flex之所以存在，是因为HTML曾经因为这个原因已经失败了一次。现在有了canvas，只是时间问题，直到人们再次理顺头脑。忽略历史而受到-1分。 - Resist Design
显示剩余3条评论
20
在过去的四年中，我一直在为画布构建组件，包括按钮、刻度盘、滑块、复选框、单选按钮、颜色选择器、窗格、窗口、指示器、等待器、步进器、标签、垫片等。请参见http://zimjs.com/components/以获取工作示例。
优势如下：
就界面屏幕阅读器结果而言，许多画布创建并不适合视觉受限者。如果适用，仍然可以完成这项任务。
最后一条评论...一致性是重要的设计原则，但变化是生活的调味品。我认为我们不应该依赖于单一的界面系统，应该有增长、实验和探索的空间。
优势如下：
- 与传统的HTML/CSS组件相比，可以以更多或不同的方式自定义组件，并制作更多类型的组件。请参见http://zimjs.com/docs.html以获取示例。
- 在制作交互式作品时，将组件嵌入应用程序或游戏中通常很重要。考虑到应用程序的缩放，通过叠加HTML组件实现这一点是困难的。
- 在拖动面板、动画组件、缩放组件、使用画布库事件（ZIM和CreateJS使用具有优点的on()方法——画布组件可以利用此方法）时，确实存在更紧密的集成。
就界面屏幕阅读器结果而言，许多画布创建并不适合视觉受限者。如果适用，仍然可以完成这项任务。
最后一条评论...一致性是重要的设计原则，但变化是生活的调味品。我认为我们不应该依赖于单一的界面系统，应该有增长、实验和探索的空间。
- Dan Zen
5
1自上述回复以来，ZIM已为其所有画布组件添加了可访问性。由于单个位图画布不直接支持此功能，因此支持是通过在画布后面放置HTML标记来实现的。http://zimjs.com/accessibility/但这确实提供了可访问性和画布组件如何工作的示例。 - Dan Zen
看起来很有趣，但是...产品页面有点让人却步。这里有一句话：“数字广告已经超过了传统媒体购买。ZIM提供易于交互和动画，并且通常可以简化为40k以保持广告尺寸较小。查看更多的想法和提示...”那些确实是单词，但它们毫无意义。整个产品页面似乎充满了像这样的片段，以至于它实际上让我头痛。 - slumtrimpet
PS...我还是会点赞的，因为我真的很喜欢这个概念，只需要缓和一下产品页面，使其感觉不那么混乱就好了。 - slumtrimpet
感谢您的留言@slumtrimpet。该描述来自十种特性之一，其中在Canvas上编码是有意义的 - 在这种情况下是交互式广告（admusements）。这些部分有点促销性质 - 与网站的其他部分相比 - 很抱歉它们让您头痛，感谢您的支持。 - Dan Zen
好的工作！我同意我们需要尝试使用接口，希望未来这样的项目会增加。 - Stas Gavrylov
4
这听起来不是一个好主意。您将失去用户期望的许多可访问性，例如焦点和制表符。或者您需要实现所有这些功能，这将是很多工作量。
更好的方法是使用HTML5和CSS3来完成这些事情。有许多JavaScript GUI框架可用，例如查看15个JavaScript Web UI库、框架和工具包。
更好的方法是使用HTML5和CSS3来完成这些事情。有许多JavaScript GUI框架可用，例如查看15个JavaScript Web UI库、框架和工具包。
- Jonas
1
3两亿个 JavaScript 用户界面库、框架和工具包。 - Alan B
3
我们尝试过类似的方法，但最终得出结论，世界还没有准备好。)
你应该牢记以下几点：
- JavaScript 应始终启用。现在考虑它可能不是什么大问题，但仍值得一提。
- HTML / CSS 实际上是一组传统且不断发展的标准堆栈，迟早会需要一些描述性语言来减少您的画布渲染的 UI 组件中重复代码的需求。这里有两个选项 - 尝试发明一些专有的东西，这实际上可能很有趣和有趣，但可能会带来一些非常悲惨的后果。第二种方法是重新实现 HTML / CSS，以避免混淆第三方开发人员。但是等等，我们已经有了 HTML / CSS 引擎)))
- 事件和用户体验。乔纳斯是对的。尝试重新实现甚至是 JS 事件模型的子集，以使其更舒适地开发画布渲染的组件是困难的。有些问题甚至是无法解决的。
所以，这实际上是一个有趣的经验，但我不建议这样做。
- shabunc
1
以下是我选择这样做的原因：
我的简历在所有浏览器中都能呈现相同的效果。
我可以在我的 Go（Google Go）项目中重复使用代码。我正在使用 SFML 来设置像素，只要我不尝试任何超级“聪明”的东西，代码就会很容易转录。
这是一个很好的练习，虽然重新发明轮子不好，但有人必须知道如何做到这一点。
- KANJICODER
0
我开发了一个 JavaScript 库，使用户能够使用画布元素创建用户界面。您可以构建不同类型的 UI 元素，甚至可以创建自己的元素类型，如俄罗斯方块、数独等等...
这就是库：canvasui-js.com。
这就是库：canvasui-js.com。
- Martí Serra
1
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接