HTML5キャンバスを使用して、リッチなインターネットアプリケーションを簡単に作成できます。
FlexCanvasJSは、高度にカスタマイズ可能なユーザーインタラクティブなキャンバス要素、階層的な親 /子ディスプレイリスト、UIイベント、スタイリングとスキン、相対的および動的なレイアウト、自動再描画領域、およびボタン、ドロップダウン、データグラット、データグラッド、データグラット、カラーピッカー、デートピッカー、編集可能なコントロールなど、ボタン、ドロップダウン、データアグリリッド、カラーピッカー、編集可能なコントロールなどの多くのUIコントロールが含まれています。
マウス、キーボード、フォーカス、ロールオーバーなどを含むがこれらに限定されない、キャプチャおよびバブルフェーズを含むほとんどの典型的なUIイベントがサポートされています...
複雑なスケーラブルなレイアウトは、容器要素をネストすることで簡単に実現できます。 DatalistやDatagridなどのデータ駆動型コンテナは、非常に大きなデータセットを表示することで、優れたパフォーマンスを維持するために画面上で表示されるもののみをレンダリングするだけで、関連するデータ収集が変更されると自動的に更新されます。
堅牢なスタイリングとスキニングシステムが提供されているため、UIコントロールの外観と動作を簡単に変更およびカスタマイズできます。
FlexCanvasjsはあなたのために重い持ち上げをします。レンダリングキャッシング、レッド描画領域、複合層、エフェクトはすべて自動的であり、最も複雑で、アニメーション化され、重ねられたアプリケーションとゲームでも優れたパフォーマンスを提供します。
必要なのは、MINIFIED FLEXCANVASJSライブラリとHTMLキャンバスだけです。最新リリースからMinified Libraryをダウンロードしてください。
以下の例は、すべてのキャンバスが機能しますが、フルスクリーンキャンバスを使用することです。
<!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 Canvasを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 ) ;
}