Canvas図形をマウスに反応させるプラグイン(試作中)
次期マークアップ仕様のHTML5の機能を使ったjQueryプラグインを現在作成中です。
よくウェブサイトでフルFlashのページなどを見かけますが、これに対抗してフルCanvasページを作ってみたいという思いが前からありました。しかし、現状はCanvasでテキスト表示機能が使えるブラウザも増え、環境は整ってきてはいるものの、さすがにまだ機能面ではFlashに及びません。たとえば、図形をオブジェクトとして扱うといった機能がCanvasに欲しいのですが、残念ながらCanvasにはそういう機能がないわけです。
今回作成したのはまだ試作中ですが、
Clickable Canvas(仮名)というJavaScriptライブラリです。いくつかの限定された図形ならば、マウスポインターに反応させられるようになります。まだ、とりあえず作ったという程度なので、まともな機能を持たせるにはまだ時間がかかりますが……。また、このスクリプトはjQueryのプラグインとして作成したので、ページに実装するには
jQueryライブラリが必要になります。その他、jQuery.proxyといった最新バージョンのメソッドを内部で使用しているため、1.4以上のバージョンでないと動きません。
テストページを作りました。 デモページを移動しました。
Canvas図形をクリック可能にするjQueryプラグイン
ちなみにInternet Explorerでも動くようにクロウラーキャンバスに引き続き、
uuCanvas.jsを使用しています。私の環境ではIE8で問題なく動作しています。
-
JavaScript/Ajax Canvas, HTML5, jQuery, プラグイン