すぐにデモhttp://esboza.ru/demo/を見てから、すべての説明をご覧ください 。
標準機能を使用してキャンバスに描画することは、おそらくあまり面白くないでしょう。 次のレベルの抽象化に進むには、何らかの中間リンクが必要です。そのため、プリミティブではなく、イベント、アニメーション、プロパティの管理などを掛けることができるオブジェクトを使用して描画できます。作業の過程で、キャンバスのフレームワークのアイデアが私を捕らえ、今でも私の意識を刺激しています。
デモのコード：
関数描画（ ） {
var canvas = document。 getElementById （ 'canvas_dom' ） ; //レンダリングプロセスが行われるキャンバス
if （ canvas。getContext ）
{
var all_objects = new esboza （ canvas ） ; //コンテナを作成します
var Bezier_real = new Bezier ; //作成-ベジェ曲線
//ポイントを追加します
Bezier_real。 add_point （ 348、342 ） ;
Bezier_real。 add_point （ 328.5、331 ） ;
Bezier_real。 add_point （ 307.5、323 ） ;
Bezier_real。 add_point （ 294、308 ） ;
Bezier_real。 add_point （ 280.5、293 ） ;
Bezier_real。 add_point （ 243、243.5 ） ;
Bezier_real。 add_point （ 293、175.5 ） ;
/ *など... * /
//プロパティを設定します
Bezier_real。 set_fillStyle （ 'RGB（191,213,221）' ） ;
Bezier_real。 set_fill （ ） ;
//ベジェ曲線をコンテナに追加し、レンダリングプロセスを開始します
all_objects。 add （ Bezier_real ） 。 render （ ） ;
}
}
そして、onloadでこの関数の呼び出しを終了します。
< body onload = "draw" >
「Internet Explorerで最も高速に動作する」というフレーズを言うとは思っていませんでしたが、解決方法はありません... 何年もの間、「より速い」、「動作する」、「インターネットエクスプローラー」という言葉を同じ文にすることはできないと確信していました。
これですべてです。これはほんの始まりです。第2部では、オブジェクトをアニメーション化する方法とイベントのモデルがどのように機能するかを示します。
PS1 パブリックドメインでは、フレームワークはドキュメントのテストと準備が少しクローズされた直後に利用可能になります。
PS2。 コースでの負のスケーリングのバグについて。
PS3 http://esboza.ruに注意を払ってはいけませんが、そこにはスタブがあります。 デザイナーが心配から自由になり、傷ついたデザインを埋めるとすぐに、彼女はクールなサイトに変化します。