界面設計與帆布

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的不提供？