界面设计与帆布

Question

你知道的任何文件或教程，使HTML5的画布绘制接口的？

我正在考虑一个分层结构，一个用于主应用程序界面，另一个用于弹出窗口，菜单等，使用几个画布对象并动态操作它们，但是我发现它缺乏灵活性（例如，如果我想要一个非矩形的图层/画布？）。

事实是，我是新来的画布和新的复杂的界面设计，我需要一些文字得到理解这种任务的开始。

帮助将非常感激！谢谢！

Answer 1

检出Mocha UI或即将到来的MooTools Art library.两者都使用画布创建一些标准的UI元素。还有其他人在那里。

Answer 2

我不知道找用帆布完全呈现一个UI的步例如一个很好的一步的最佳方式，但你可能会找到最好的参考就是Mozilla's或限制的是，他们的实际tutorial

就使用分层的非矩形画布而言，您可能会发现各种各样的实现问题，并且您需要实现不打算以这种方式使用的系统。简单地说：你要求在一个方孔里塞上一个圆钉。

从一个语义点，画布是潜在的不可见块容器，所以如果正确地缩放容器任何你在画布绘制可以在非矩形视图暗示。如果您想要模仿全屏Flash网站的工作方式，则实际上可以将您的整个视图呈现在一个大型可缩放画布中，而矩形只会将您限制为浏览器窗口的正方形形状。

如果你想使用各种油画的各个元素的，你仍然可以分层它们彼此的顶部，但你最好的选择是确保这些观点并不互相干扰。

我的下一个建议是检查Processing.js以感受图书馆，这些图书馆允许您自动执行画布对象中动态呈现的元素的一些绘图，动画和交互性。

我希望有帮助！如果您还有其他具体问题，例如如何以您想要的方式在您的网站上显示某个弹出窗口或元素，请随时返回并提出问题。

Answer 3

虽然帆布有很多潜力，我不知道你真的想用它做一个接口，如绘制任何文本不再是文本，因此不可见的辅助技术和谷歌。

当更合适的元素可用时，作者不应该在文档中使用画布元素。例如，使用canvas元素来渲染页面标题是不合适的：如果标题的所需表达形式是图形强烈的，则应使用适当的元素（通常为h1）标记，然后使用CSS和支持的技术进行样式设置，例如XBL。

（从WhatWG HTML spec）

对不起它不是一个更加有用的答案:)顺便说一下什么是你希望从画布拿到，也就是说，jQuery的不提供？