こんにちは、Habr！ html5キャンバスにあらゆる種類のギミックを非常に簡単かつエレガントに描画するのに役立つ新しいライブラリについてお話したいと思います。 あなたはすでに彼女のことを聞いたことがあるかもしれませんが、今彼女は新たな誕生を経験しています。 さて、カットの下で、私はあなたに多くの興味深い例を示し、仕事のニュアンスについて説明し、すべての秘書の雷雨へのリンクを与えます-このLibCanvasを使用して作成されたほとんど動作するソリティアソリティア。
ですから、この図書館は本当に生まれ変わりました。 それとも成長したのでしょうか？ 苦労しないように、私はすぐにビジネス、つまり例に取りかかります。
行動
さらに、第1部で説明したことは、非常に重要な機能である動作です。 オブジェクトを使用すると、特定の機能をオブジェクトに付与できます。 それらのいくつかの例を挙げます。 実際、もう少しあります
LibCanvas.Interfaces.DraggableおよびLibCanvas.Interfaces.Droppable
多くの人がこれらのインターフェースをjQueryで知っています。 ドラッグ可能により、オブジェクトを移動できます。 Droppableを使用すると、あるオブジェクトを別のオブジェクトにスローできます。 ドラッグ可能な例では、単にオブジェクトを移動します。 ドロップ可能な例では、長方形を円の中にドロップし、円を通過します。
ドラッグ可能な例
ドロップ可能な例
LibCanvas.Behaviors.Linkable
現在のオブジェクトにオブジェクトをアタッチすると、現在のオブジェクトを移動すると、アタッチされたオブジェクトも移動します。 この例では、移動します-正方形は移動しますが、逆は移動しません。
リンク可能な例
LibCanvas.Behaviors.Moveable
与えられた速度で、または瞬時にオブジェクトをあるポイントにスムーズに移動します。
移動可能な例
その他、クリック可能、描画可能（基本の基礎）、バインド可能（基本のもう1つの基礎）などのさまざまなインターフェース 時間が経つにつれて、私は増加します。 たとえば、近い将来-サイズ変更可能[LibCanvas.Shapes.Polygonのサイズを変更する方法を見つけた場合（または単に例外をスローしますか？）]
人生により近いもの
デスクトップ環境
デスクトップ環境をシミュレートしている機能を使用してみましょう。 App.Start.de（）には 34行のコードしかなく、結果があります！ もちろん、KDE4の前に、私たちの環境は成長し続けなければなりませんが、どこから始めなければなりませんか？ 彼女を何と呼びますか？ Cde？ 忙しいけど さて、それから私はそれを理解します。
ソリティアソリティア
そして、ここが楽しい部分です。 健全なFPSとクロスブラウザ互換性を備えた非常にプレイ可能なアプリケーション（クロスブラウザと言いましたが、IEについては何もありませんでした！）
ソリティアソリティアは、html5 + javascript + libcanvasで栄光をたたえています。 お楽しみください。
免許
LibCanvas-lgpl、Googleコードのリポジトリまたはアーカイブ 内のソース
ソリティアソリティア-gpl v3- アーカイブ済み
よくある質問
1. Mootools-atstoy、libcanvas全体をめちゃくちゃに
私はjQueryが大好きです。 まっすぐな魂はそこにお茶をしないでください。 彼は美しいです。 すごい。 しかし...canvasでの開発にはまったく適していません。 何が、何がそうではない。 jQuery == DOM
最初はこのライブラリのミニチュアフレームワークを作成しましたが、MooToolsを発明していることに気付きました。 私はこのフレームワークを使いながら、なんとかこのフレームワークに夢中になりました（そしてjQueryの後でそれを認識しました）。 もちろん、jQueryはDOMでの作業にははるかに優れていますが、jQueryを使用せずにキャンバスに描画するような目的では、jQueryは非常に困難です。 LibCanvasの各クラス、各メソッドは、単にmutulesで飽和しているため、これがなければ、これらすべてはそれほど美しく優雅にはなりませんでした。
2.プロトタイプ（特に配列）の拡張は悪です！
そのような言葉は悪であり、プロトタイプ（特に配列）の拡張は素晴らしいアイデアです。 for（[]の[var i]）を使用すると、高度なプロトタイプでも問題が発生しませんが、一方で、コードが非常に読みやすくエレガントになります。 また、配列には（[]）を使用します。3.さて、バギーキャンバス！
キャンバス（html5など）は現在まだ初期段階にあると思います。 1年か2年で、ウェブ上でフラッシュのように自然になります。 Google、Opera、Mozilla、Apple-すべてがキャンバスを驚くべきペースで改善します。 はい。Microsoftでさえ、将来、IE9の子孫にこの技術のサポートを導入すると約束しました。 1年半前に起こったこと（Firefox 3.0、Opera 9.5、Chromeが登場しました）と、レンダリング速度の観点から現在のこと（Firefox 4、Opera 10.6、Chrome 6）を見てください。 違いは大きいです。 ほぼゼロから許容レベルまで。 そして、もう1年半で驚くべき結果が得られます。4.さて、あなたはバギーです（LibCanvas |例|ソリティア）！
おそらく。 彼らはまだ初期段階のベータ版でもあります。 Googleコードでのバッグのコンパイルにおけるすべてのバグと提案を受け入れます 。 あなたはそれをより良くすることができます。5. SVG、RaphaelJSなど
オリジナルである-ここでそれを覚えていない。 私の立場が興味深い場合- 前のトピックに関するコメント、そして最も重要なこととして、この投稿の最初のスレッドのコメントを読んでください。