FlexCanvasJS
v1.3.2
使用HTML5畫布輕鬆創建豐富的Internet應用程序。
FlexCanvasJS provides highly customizable user interactive canvas display elements, hierarchical parent / child display list, UI events, styling and skinning, relative and dynamic layouts, automatic redraw regions, and includes many UI controls such as buttons, checkboxes, dropdowns, datagrids, color pickers, date pickers, editable and wrapping text controls, and more, while also allowing easy creation of custom components or controls.
支持大多數典型的UI事件，包括捕獲和冒泡階段，包括但不限於鼠標，鍵盤，焦點，翻轉等...
通過嵌套容器元素可以輕鬆實現複雜的可擴展佈局。數據驅動的容器（例如Datalist和DataGrid）允許顯示非常大的數據集，同時僅渲染屏幕上可見的內容以保持出色的性能，並將隨著其關聯的數據收集的更改而自動綁定並自動更新。
提供了強大的樣式和皮膚系統，使您可以輕鬆修改和自定義任何UI控件的外觀和行為。
Flexcanvasjs為您做繁重的舉重。即使在最複雜，動畫和大分層的應用程序和遊戲中，渲染緩存，重新繪製區域，複合層和效果都是自動的，即使在最複雜，動畫和大量分層的應用中也是如此。
您需要的只是縮小的FlexCanvasjs庫和HTML帆布。從最新版本中下載縮小庫。
下面的示例是使用全屏畫布，儘管任何畫布都可以使用。
<!DOCTYPE html >
< html >
< head >
< meta charset = utf-8 >
< title > FlexCanvasJS Web Application </ title >
< style >
html, body, canvas { width: 100%; height: 100%; margin: 0; overflow: hidden; }
</ style >
< script src =" FlexCanvasJS_min.js " type =" text/javascript " > </ script >
</ head >
< body >
<!-- Full screen canvas -->
< canvas id =" flexCanvasApplication " > </ canvas >
</ body >
</ html >現在，將DOM畫布附加到FlexCanvasjs CanvasManager上，並創建和設計我們的元素：
//Create elements
var canvasManager = new CanvasManager ( ) ;
var colorPicker = new ColorPickerElement ( ) ;
function init ( )
{
//Attach the DOM canvas to our CanvasManager
canvasManager . setCanvas ( document . getElementById ( "flexCanvasApplication" ) ) ;
//Set up our color picker - add style definitions, event listeners, etc.
colorPicker . setStyle ( "X" , 50 ) ;
colorPicker . setStyle ( "Y" , 50 ) ;
//Add colorPicker to CanvasManager
canvasManager . addElement ( colorPicker ) ;
}
