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

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

2008-09-23 (火)
技術

ripple

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

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

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

var Ripple = function(radius) {
	this.radius = radius;
	this.alpha = 1;
	this.top = 150;
	this.left = 150;
	
	this.init();
};

Ripple.prototype = {
	init: function(){
		var canvas = document.getElementById('canvassample');
		if (!canvas || !canvas.getContext)
			return false;
		this.ctx = canvas.getContext('2d');
	},

draw: function(){
		// 消すとちょっと変になっちゃうからやめた
		// this.canvasClear();

this.ctx.beginPath();
		this.ctx.globalAlpha = this.alpha;
		this.ctx.strokeStyle = 'rgb(128, 100, 162)';
		this.ctx.arc(this.top, this.left, this.radius, 0, Math.PI*2, false);
		this.ctx.stroke();
		this.alpha -= 0.1;
		this.radius += 2;

if(this.alpha <= 0)
			return;

var _this = this;
		setTimeout(function(){
			_this.draw();
		}, 50);
	},

canvasClear: function(attribute){
		this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
	},
	
	pos: function(event){
		if (!event) var event = window.event;
		if (!event.pageX) event.pageX = event.clientX + document.body.scrollLeft;
		if (!event.pageY) event.pageY = event.clientY + document.body.scrollTop;
		
		return {
			top: event.pageX,
			left: event.pageY
		};
	}
}

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

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

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

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

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

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

【関連する記事】

Comments:0

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, JavaScripter Blog

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

作ったもの

キングボンビーがサイトを侵略する？jQuery Plugin - kingbonbi.js作りました

なんかものが落ちるjQuery Plugin - JDropper作りました

RSS Feeds

Search

Recent Entries

Tag cloud

Categories

月別アーカイブ

このブログについて

author：hisasann

description：フリーランスで仕事しているプログラマーです。
最近はJavaScript、Rails、Java（Struts+Spring）なんかをいろいろといじっています。
今やってみたいのはFlashやActionScriptかな。
また誕生して半年になる子供の成長を見守るパパでもあります。

日々の日記 :

Hisasann’s Log@はてダ

他に運営しているブログ：

利用しているWebサービス :

最近のコメント

Powered by

Page Top