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 ) ;
}
