投稿者 tel | 2011年10月16日

fillRectのほうが速い

CanvasでbeginPath()、rect()、fill()するよりもfillRect()したほうが速い。というかGoogle Chromeだと前者のほうが5~10倍くらい遅い。Firefoxだと2倍くらい。

追記

別のPCでやったらrectのほうが少し速くなる場合もあった。とりあえずはfillRect使っておけば問題はなさそう。

http://jsdo.it/sapphire_al2o3/8AI9

console.time('fillRect');

for(var i = 0; i < 80; i++) {
	for(var j = 0; j < 80; j++) {
		ctx.fillStyle = rgb(i * 255 / 80, j * 255 / 80, 0);
		ctx.fillRect(j * 5, i * 5, 5, 5);
	}
}

console.timeEnd('fillRect');

console.time('rect');

for(i = 0; i < 80; i++) {
	for(j = 0; j < 80; j++) {
		ctx.fillStyle = rgb(j * 255 / 80, i * 255 / 80, 0);
		ctx.beginPath();
		ctx.rect(j * 5, i * 5, 5, 5);
		ctx.fill();
	}
}

console.timeEnd('rect');

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。