すべての人に良い一日を！
jCanvaScriptは、「注目を集める画像」からわかるように、JavaScriptフレームワークです。 トピックの名前から、ライブラリの目的はHTML5キャンバス要素を操作することであると推測することは難しくないと思います。 カットの下で、すべての関心のある人々は、ライブラリとそれがどのように作成されたかについての短い物語を見つけるでしょう。
私はネットワーク上のどこかで、おそらくHabrでさえ、キャンバスについてもう一度読んで-座って絵を描きました。 シンプルであることがわかりましたが、あまり便利ではありません。 さて、大丈夫-最初の考えがありました、これらは些細なことです、私はアニメーション化された何かを作成しようとします。 アニメーションの作成も簡単でした-もちろん、アニメーション自体はシンプルであり、制御する必要はありません。 一般的に、森の中に行くほど、fireが増えます。 何かを変える必要がありました。
まず、プリミティブを描画するためのラッパーが登場し、次にライブラリのプロトタイプが作成され（オブジェクトのファクトリーが内部にあります）、関数が徐々に追加されました-まず、キャンバスAPIの機能にアクセスします。 それから私はイベントで働きたいと思った...時間が経つと、図書館が成長した。
では、今日は何がありますか？
キャンバスと対話するための便利なインターフェイスを提供する、約36kb（バージョン1.0サイズ）の小さな圧縮ライブラリ。 この記事のフレームワークでインターフェースについては説明しません。さらに、プロジェクトの公式Webサイトで、それらについて十分な説明があり、さらに多くの例があります。 ただし、ライブラリは自給自足です。つまり、追加のライブラリを接続する必要はなく、それらの拡張ではありません。もちろん、これは驚くべきことではありませんが、そうであるべきです。 どういうわけか最近、プラグインの作成がより一般的になりました。
それについても言及します：
- もちろん、マウス、キーボード、およびフォーカスイベントをオブジェクトにアタッチできます。
例：
jc.circle(x,y,radius) .click(function(){ //- });
- もちろん、ドラッグアンドドロップは既に実装されています。 コードは提供しませんが、jQueryの場合とほぼ同様に、ドラッグ可能な関数とドロップ可能な関数を使用するだけです。
- 当然、（結局JavaScript）メソッドチェーンを使用できます。
このように：
jc.circle(x,y,radius) .up('top')// .id('myCircle')// id .name('myCircles'); //
- はい。要素には識別子（id）と名前（name）を割り当てることができるため、個別に（最初の場合）またはグループとして（2番目の場合）アドレスすることができます。
たとえば、次のような最後の例のサークルにアクセスできます。
jc('#myCircle').color('rgba(255,255,0,0.5)');// id jc('.myCircles').color('rgba(255,255,0,0.5)');// name
ライブラリは絶えず追加、リファクタリングなどされています。 これは、一方でコードに変更すべきものがまだあることを意味し、他方でさらに多くが追加されることを意味します。 願いやアイデアは大歓迎です-support@jcscript.comに書いてください。 バグレポート-そこにも、私は彼らにさらに大きな焦りを期待しています。
はい、最後に、さらにいくつかのコード-非常に簡単です。 キャンバスに赤い円を描いて、しばらくしてから徐々に色を緑に変えていくにはどうすればいいですか？ など：
jc.circle(x,y,radius,'#ff0000',1) .animate({x:x1,y:y1,color:'#00ff00'},time);
もちろん、これはすべてjCanvaScriptがある場合にのみ機能し、Internet ExplorerではさらにexCanvasが必要になります。
PS正直なところ、私はこの発表でもう少し待たなければなりませんでした-サイトはリテラシーについて完全にテストされていませんでしたが、前回のカンファレンス＃html5campで数回、キャンバスで作業するためのフレームワークに関する質問が提起され、急いでしまいました。 ちなみに、jCanvaScriptに関するTwitter投稿がありましたが、応答はありませんでした。 フィードバックをお願いします。）
UPD ： GitHub 、 twitter