Home > 技術 > canvasを使って波紋が広がるripple.js作りました

canvasを使って波紋が広がるripple.js作りました

ripple

canvas使って何かしたいな〜と思っていたら、波紋を描いたらちょっと面白いかもと思ってこんなJavaScript作ってみました。
あんまり深いこと考えてないですw

マウスの移動に波紋が付いてきます。
またクリックすると少し大きい波紋が広がります。

一応コードは以下の感じ。
canvasを使って丸を描いてます。(すごいシンプルっ!w)

またイベントのセットは以下のようにmousemoveclickに割り当ててます。
すいません、今手元にIEがないのでIEのチェックだけ出来ていないです。多分以下のコードで動くような〜。

Eventが発生するたびにマウスの座標をRippleクラスに渡しています。その後drawメソッドで描画しています。

とりあえず触ってみてください。
ripple.jsを触ってみる

ちょっと気に入っているのはこういったアニメーションするときに少し描画を遅らせるとそれっぽくなる気がします。
なので、マウスを移動したときに少し遅れて波紋が付いてくると思います。
こうゆうの結構好きです。

ソースは以下からダウンロードできます。
ripple.js


他にもこんなん作ってます。どうぞよろピク。
キングボンビーがサイトを侵略する?jQuery Plugin - kingbonbi.js作りました
なんかものが落ちるjQuery Plugin - JDropper作りました

Trackback:0

TrackBack URL for this entry
http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1129
Listed below are links to weblogs that reference
canvasを使って波紋が広がるripple.js作りました from HouseTect, JavaScriptな情報をあなたに

Home > 技術 > canvasを使って波紋が広がるripple.js作りました

Tag cloud
月別アーカイブ
Powered by
Powered by
Movable Type Commercial 4.261

Page Top