HTML5キャンバスフレームワークが必要です:
- オブジェクトを描画します(例:長方形)
- オブジェクトのonmouseoverイベントで色/境界線のスタイルを変更します
- クリックすると、いくつかのjsアクションを実行します
どうも
編集:私はついにraphaeljsを使用することにしました(代替はdojoになります)。このフレームワークは素晴らしいです。(HTML5キャンバスを必要とせず、SVGを使用します)
本当に必要なのは保持モードのグラフィックインターフェイスのようです。このインターフェイスでは、オブジェクトの作成、オブジェクトのマウスイベントの取得、プロパティの変更、移動などを行い、必要に応じてブラウザで画面の再描画に対応できます。<canvas>
この場合、イミディエイトモードのグラフィックスサーフェスとして実際にはピクセルでいっぱいのボックスである、の代わりにSVGを使用する方がよいでしょう。
あなたが言及したものよりもはるかに優れたパフォーマンスを発揮するKineticJSを忘れないでください。さらに、はるかに単純なAPIを備えています
bHiveはこれを非常にうまく実行し、Actionscriptのバックグラウンドから来ているので、非常に使いやすいことがわかりました。ドキュメントが役に立たないため、デモを見る必要がありました。
あなたを助けること..
square = engine.createShape({
shape: 'square',
style: 'filled',
backgroundColor: '#000',
width: 120,
height: 20,
x: 20,
y: 100
});
マウスアクションを実行するには、それをクリップオブジェクトに追加する必要があります。
clip = engine.createClip({ x: 20, y: 20 });
それで
clip.add(square);
イベントリスナーを追加する
clip.addEventListener('onmouseover',function(e) { some code ... });
clip.addEventListener('onclick',function(e) { some code ... });
ループでは、正方形を描く必要があります。
clip.draw();
デモのソースを使用して作業を進めているので、ロールオーバーとオンクリックが含まれているhttp://www.bhivecanvas.com/demos/cargame.phpを確認してください。