Javascript 创建基于画布的 UI 组件有意义吗？

Does it make sense to create canvas-based UI components?

提问by user802232

While DOM still totally dominates the way we create UIs, does it make sense to create a bunch of entirely canvas-based UI components, like buttons, lists, horizontal/vertical groups, etc?

虽然 DOM 仍然完全主导着我们创建 UI 的方式，但创建一堆完全基于画布的 UI 组件（如按钮、列表、水平/垂直组等）是否有意义？

I know for sure that there will be a lot of drawbacks, but what would the possible advantages of such be?

我肯定知道会有很多缺点，但这些可能的优点是什么？

For one, I'd say in general the visual integration with canvas will be much tighter.

一方面，我想说一般来说，与画布的视觉集成会更加紧密。

采纳答案by Simon Sarris

Yes and no.

是和否。

In terms of accenting the UI of the page, it's somewhat ideal if the page navigation and operation can also work well if JavaScript is not enabled.

在强调页面的 UI 方面，如果不启用 JavaScript 也能很好地进行页面导航和操作，那就有点理想了。

It is okay to have UI elements that are prettifiedby canvas, but remember that these elements will not be accessible to web crawlers (like Google), or to users who have scripts disabled.

可以使用画布美化UI 元素，但请记住，网络爬虫（如 Google）或禁用脚本的用户将无法访问这些元素。

No:

不：

Don't try to remake text editing in canvas. Even the HTML Canvas Spec has a section where they strongly advise against trying to create text-editingcontrols in Canvas.

不要尝试在画布中重新进行文本编辑。甚至 HTML Canvas 规范也有一个部分，他们强烈建议不要尝试在 Canvas 中创建文本编辑控件。

There's a long history of trying to do that and failing (look up Mozilla Bespin)

尝试这样做并失败的历史由来已久（查找 Mozilla Bespin）

I know for sure that there will be a lot of drawbacks, but what would the possible advantages of such be?

我肯定知道会有很多缺点，但这些可能的优点是什么？

Yes:

是的：

Visualizations (that have no fallback except text description) and controls like dials (that fall back to some HTML, like input type="range"sliders) can be greatly enhanced with Canvas.

input type="range"使用 Canvas 可以大大增强可视化效果（除了文本描述之外没有回退）和诸如刻度盘之类的控件（回退到某些 HTML，如滑块）。

If you search for canvas controls, canvas diagrams, canvas charts, etc you'll find a lot of libraries that offer stuff like this. Just understand very well that many of these come at the expense of accessibility.

如果您搜索画布控件、画布图表、画布图表等，您会发现很多提供此类内容的库。只要很好地理解其中许多都是以可访问性为代价的。

Maybe:

也许：

There are a lot of pretty elements you can add to a page with Canvas. Some things can get really beautiful without being intrusive or altering the page navigation in any way. Perhaps the logo of a website would "grow" procedurally or glow or otherwise get more complex. Other background animation effects might be really neat.

您可以使用 Canvas 将许多漂亮的元素添加到页面中。有些东西可以变得非常漂亮，而不会以任何方式侵入或改变页面导航。也许网站的标志会在程序上“增长”或发光或以其他方式变得更加复杂。其他背景动画效果可能非常简洁。

There are also interactive images, like on sites where you want a diagram or breakdown or exploded view that you would navigate to inspect the various parts of something (a chemical structure, a biological organism, a new car). Visual interactive media such as diagramming and games are some of the best use-cases for Canvas.

还有交互式图像，例如在您想要图表或分解图或分解图的网站上，您可以导航以检查某物的各个部分（化学结构、生物有机体、新车）。图表和游戏等视觉交互媒体是 Canvas 的一些最佳用例。

回答by raju-bitter

The Zebraproject has created a full component set which is rendered into a HTML5 canvas element. Here is a screenshot of the component sampler. I haven't used the framework, but it should give you an idea of how well the different browsers can render UI components.

该斑马项目已创建了被渲染成HTML5 canvas元素完整的组件集。这是组件采样器的屏幕截图。我没有使用过该框架，但它应该让您了解不同浏览器可以呈现 UI 组件的效果。

Rotate the components and check the quality of line rendering (anti-aliasing), which is very different depending on the browser you use. Here's some more information regarding that problem:

旋转组件并检查线条渲染（抗锯齿）的质量，这取决于您使用的浏览器。以下是有关该问题的更多信息：

• HTML5 Canvas avoid any subpixel rendering
• Poor anti-aliasing of text drawn on Canvas
• Subpixel anti-aliased text on HTML5's canvas element

• HTML5 Canvas 避免任何子像素渲染
• 在 Canvas 上绘制的文本抗锯齿效果不佳
• HTML5 画布元素上的亚像素抗锯齿文本

Another project is Makepad, a webGL worker-based library and live code editor. Every visible part of the UI is rendered in WebGL, including all text on screen, rendered through the integrated text rendering engine.

另一个项目是 Makepad，一个基于 webGL worker 的库和实时代码编辑器。UI 的每个可见部分都在 WebGL 中呈现，包括屏幕上的所有文本，通过集成的文本呈现引擎呈现。

It is still early phase for the project, but you can try out a live demo here. Makepad is open source, the Git repo can be found at github.com/makepad/makepad.github.io.

该项目仍处于早期阶段，但您可以在此处试用现场演示。Makepad 是开源的，Git repo 可以在github.com/makepad/makepad.github.io找到。

回答by nick fallon

Using Canvas as a UI base is an excellent idea if you have > 200 elements. It's much, much faster to render than using DOM elements.

如果您有超过 200 个元素，则使用 Canvas 作为 UI 基础是一个好主意。渲染比使用 DOM 元素要快得多。

On iPhone Safari, 300 animated DOM elements runs at 3fps (frames per second), very slow.

在 iPhone Safari 上，300 个动画 DOM 元素以 3fps（每秒帧数）的速度运行，非常慢。

If you use canvas, you can render > 300 elements and still achieve 30fps, which means smooth animation and transitions. I've tested this at length so I know it works.

如果您使用画布，您可以渲染 > 300 个元素并仍然达到 30fps，这意味着平滑的动画和过渡。我已经对此进行了长时间的测试，所以我知道它有效。

The downside to Canvas (as someone else mentioned), is that search engines can't see your content. But if you are building an app that shouldn't be spidered and needs to run on mobile, then Canvas is the way to go.

Canvas 的缺点（正如其他人提到的）是搜索引擎无法看到您的内容。但是，如果您正在构建一个不应该被爬行并需要在移动设备上运行的应用程序，那么 Canvas 是您的最佳选择。

回答by Dan Zen

For the last four years I have been building components for the canvas including buttons, dials, sliders, check boxes, radio buttons, color pickers, panes, windows, indicators, waiters, steppers, tabs, pads, etc. see http://zimjs.com/components/for working examples.

在过去的四年里，我一直在为画布构建组件，包括按钮、刻度盘、滑块、复选框、单选按钮、颜色选择器、窗格、窗口、指示器、服务员、步进器、选项卡、垫子等。请参阅http:// zimjs.com/components/工作示例。

The advantages are as follows:

优点如下：

1. The components can be customized in more or different ways than traditional HTML/CSS components and we can make more types of components. See http://zimjs.com/docs.htmlfor examples.
2. It is often important when making interactive works to embed the components right in the app or game. This is difficult to do by overlaying HTML components when taking into account scaling apps.
3. There is definitely tighter integration when dragging panels, animating components, scaling components, working with canvas library events (ZIM and CreateJS use on() method which has benefits - canvas components can make use of this).

1. 与传统的 HTML/CSS 组件相比，这些组件可以以更多或不同的方式进行定制，我们可以制作更多类型的组件。有关示例，请参阅http://zimjs.com/docs.html。
2. 在制作交互式作品时，将组件直接嵌入到应用程序或游戏中通常很重要。在考虑缩放应用程序时，通过覆盖 HTML 组件很难做到这一点。
3. 在拖动面板、动画组件、缩放组件、处理画布库事件（ZIM 和 CreateJS 使用 on() 方法有好处 - 画布组件可以利用这一点）时，肯定有更紧密的集成。

I love working with Canvas components - it saves lines of code and I don't have to switch between systems. Just a reminder... the format of CSS is basically the same as an object literal in code. I would rather format my components in code any day rather than CSS - personally, I find it much easier to work in one system.

我喜欢使用 Canvas 组件 - 它可以节省代码行，而且我不必在系统之间切换。提醒一下……CSS 的格式与代码中的对象字面量基本相同。我宁愿在任何一天都用代码而不是 CSS 来格式化我的组件 - 就我个人而言，我发现在一个系统中工作要容易得多。

In terms of screen reader results for interface - many canvas creations are not suited for visually impaired. It can still be done, as pointed out, if applicable.

在界面的屏幕阅读器结果方面 - 许多画布创作不适合视障人士。正如所指出的，如果适用，它仍然可以完成。

One final comment... consistencyis an important design principle but varietyis the spice of life. I do not think we should be relying on a homogeneous interface system. There should be room for growth, experimentation and exploration.

最后一个评论......一致性是一个重要的设计原则，但多样性是生活的调味品。我认为我们不应该依赖同构的接口系统。应该有成长、实验和探索的空间。

回答by Jonas

That sounds like a bad idea. You will lose much accessibility that the user expect e.g. focus and tabbing. Or it will be a lot of work for you to implement all that.

这听起来是个坏主意。您将失去用户期望的许多可访问性，例如焦点和制表符。或者你需要做很多工作来实现所有这些。

It's much better to use HTML5 and CSS3 for such things. There is many JavaScript GUI Frameworks available e.g. see 15 Javascript Web UI Libraries, Frameworks and Toolkits.

对于这些事情，最好使用 HTML5 和 CSS3。有许多可用的 JavaScript GUI 框架，例如参见15 Javascript Web UI 库、框架和工具包。

回答by shabunc

We've tried something like this but finally came up with the idea that the world is not ready yet )

我们已经尝试过这样的事情，但最终想出了世界还没有准备好的想法）

You should keep in mind following

你应该记住以下

• js always should be enabled. Nowadays one can consider it not a big deal, but nevertheless it worth to mention.
• html/css is actually traditional and constantly evolving stack of standards, sooner or later you'll feel the need in having some descriptive language to reduce repeating code in your canvas rendered UI-components. And there are two options here - to try to invent something proprietary, which actually could be fun and interesting, but can have some very sad consequences. The second way is to reimplement html/css not to confuse third party developers. But, wait a minute, we've already have html/css engine )))
• events and, therefore, user experience. Jonas is right. Trying to reimplement even a subset of js event model to make it more comfortable to develop canvas rendered components is hard. Some issues even are unsolvable.

• js 总是应该被启用。现在人们可以认为这不是什么大不了的事，但仍然值得一提。
• html/css 实际上是传统且不断发展的标准堆栈，迟早你会觉得需要一些描述性语言来减少画布呈现的 UI 组件中的重复代码。这里有两个选择——尝试发明一些专有的东西，这实际上可能很有趣，但可能会产生一些非常悲惨的后果。第二种方法是重新实现 html/css 以免混淆第三方开发人员。但是，等一下，我们已经有了 html/css 引擎 )))
• 事件，因此，用户体验。乔纳斯是对的。尝试重新实现甚至是 js 事件模型的一个子集，以使其更舒适地开发画布渲染组件是很困难的。有些问题甚至无法解决。

So, it is actually interesting experience, but I would not recommend.

所以，这实际上是很有趣的经历，但我不推荐。

回答by J.M.I. MADISON

Here is why I am choosing to do this:

这就是我选择这样做的原因：

1. My resume will render the same across all browsers.

2. I can re-use the code in my Go (Google Go) project. I am using SFML to set pixels, so as long as I don't try anything super "clever" the code will transcribe easily.

3. It's good practice, and while it's bad to re-invent the wheel, someone has to know how to do this.

1. 我的简历将在所有浏览器中呈现相同的效果。

2. 我可以在我的 Go (Google Go) 项目中重用代码。我使用 SFML 来设置像素，所以只要我不尝试任何超级“聪明”的东西，代码就会很容易转录。

3. 这是一种很好的做法，虽然重新发明轮子不好，但必须有人知道如何做到这一点。