れぶろぐ

■ Canvas drawImage Benchmark 2010 へのコメント

Canvas の drawImage() のベンチマークプログラムと、各ブラウザでの結果が、 こちらのページで公開されています。

• ベンチマーク for canvasタグとcanvas on Flash 2010 - yukobaの日記

FlashCanvas Pro での結果も載っているのですが、 いろいろと補足しておきたいことがあるので、こちらにまとめて書いておきます。

FlashCanvas Pro 1.2 alpha1 でのベンチマーク

今、ちょうど drawImage() の高速化を行っているので、 最新バージョンの FlashCanvas Pro でベンチマークを取ってみました。

約３倍速くなっています。というか、これって Safari 4.0 よりも速いのでは……。 ただ、他のベンチマークを取ってみると Firefox より遅かったりもするので、 この drawImage() のベンチマークではこういう結果になりました、くらいに思って下さい。

自分で試してみたい場合は、こちらからダウンロードできます。

• http://download.revulo.com/Canvas/FlashCanvasPro-1.2alpha1.zip
• http://download.revulo.com/Canvas/FlashCanvasPro-1.2alpha2.zip

１回目の drawImage() の処理について

FlashCanvas Pro を使ってベンチマークを行うと、 最初に一瞬だけ、それぞれの画像が１つずつ表示されると思います。 これは、FlashCanvas Pro の内部処理に関係があります。

FlashCanvas Pro では、最初に drawImage() が呼ばれた際に、Flash 側でもう１度画像を読み込み直しています。 そして、そのビットマップデータを Flash 内部にキャッシュしておき、 ２回目以降の drawImage() では、そのキャッシュを使って高速に描画するようにしています。

そのため、他のブラウザの結果と比較すると、 FlashCanvas Pro のスコアは、画像を読み込み直す分の時間が加算されていると思います。

img.src と img.onload の順番

IE8 だと問題ないようですが、IE6SP1 で試すと、ベンチマークが動かないことが時々ありました。

imgs[i] = new Image();
imgs[i].onload = function() {
    ......
};
imgs[i].src = "png/" + (i+15) + ".png?" + new Date();

このように、img.src する前に onload の定義をしておくと、動くようになりました。 確実に動くようにするという意味では、この順番にしておいた方がいいかもしれません。

Firefox の結果が妙に遅い理由

Firefox の結果が、私が試した他のベンチマークに比べて妙に遅いのは何故だろう？ と考えていたのですが、 表示された画像をよく見てみると、アンチエイリアスがかかっています。 もしかしてこれが原因？ ということで、

for (var i = 0; i < imgs.length; i++) {
	var x = (Math.random() * 750) | 0;
	var y = (Math.random() * 550) | 0;
	ctx.drawImage(imgs[i], x, y);
}

このように、座標を整数にしてから drawImage() に渡すようにしてみたところ、劇的に速くなりました。 （7500 ms → 1200 ms くらい） 他のブラウザの場合も、同様に速くなります。

小数の座標を与えるとこんなに遅くなるというのは知りませんでしたが、 実際には drawImage() で小数の座標を扱うケースというのはあまりなさそうなので、 ベンチマークとしては、上のようなコードにする方が良さそうに思います。

(2010/03/11 23:14 追記)

FlashCanvas Pro 1.2 alpha2 のベンチマーク結果を追加。

(2010/03/12 追記)

Firefox の結果が妙に遅い理由 の項目を追加。

Tags: Canvas | | | | Permalink

■ JavaScript + Canvas で作られた さめがめ

JavaScript と HTML5 Canvas を使って作られたゲームを紹介します。 Renaudeau Gaetan さんが作成した「さめがめ」です。

• The same game in HTML5 canvas « Informatique et logiciel libre
• Same Game - HTML5 canvas demo

ただ、Canvas を使っている関係上、Internet Explorer では遊ぶことができません。 そこで FlashCanvas ライブラリを使って、IE でも動くように修正を加えてみました。 FlashCanvas によるエミュレーションでどのくらい動くのか、ぜひ IE で試してみて下さい。

• さめがめ (Internet Explorer 対応版)

Renaudeau さんのオリジナルの game.js が GPL ライセンスなので、 修正版の game.js も GPL ライセンスに従って扱うようお願いします。

最初 Renaudeau さんに、「IE でも動くようにするパッチを作ったので、良かったら使って下さい」というメールを送ったのですが、それは断られました。 なんでも、「IE も Flash も嫌い。」なのだそうで。

「じゃあ、私のページに IE 対応版を掲載してもいいですか？」と尋ねたところ、 「Of course, you have my permission to use my game under the GPL licence. Don't forget to quote the source.」 という返事をいただけました。

と、このような経緯がありますので、 上記の Internet Explorer 対応版さめがめを自分のページに設置したりする場合は、 Renaudeau Gaetan さんのページで公開されているものがオリジナル、ということが分かるようにしておいて下さい。

Tags: Canvas | | | | Permalink

■ FlashCanvas Pro 1.1 を公開しました

FlashCanvas Pro とは？

FlashCanvas は、HTML5 Canvas の機能を Internet Explorer でも使えるようにする JavaScript ライブラリです。 FlashCanvas Pro は、その高機能版です。

FlashCanvas Pro 1.0 にはいくつかの問題点がありましたが、それらの修正を行いました。 他にも改良を加えて使いやすくなっていると思いますので、いろいろと試してみて下さい。

FlashCanvas Pro 1.0 からの変更点

• drawImage() のバグの修正
  • ExplorerCanvas の draw-image-flip.html のサンプルが正常に表示されなかったのを修正
  • 指定したのと違う順番で、画像が表示されることがあったのを修正
• stroke() の高速化
  • Mozilla Developer Center の 5_2_canvas_translate.html や 5_4_canvas_scale.html のサンプルが瞬時に表示されるように
• fillText(), strokeText() の高速化
• drawImage() の高速化
  • ExplorerCanvas の example3.html や resizing.html のサンプルの表示がスムーズに
• CPU time の消費を軽減
• toDataURL() を JPEG フォーマットにも対応
• 右クリックメニューに、「名前を付けて画像を保存」の機能を追加
• クリックとダブルクリックのイベントが Canvas に伝わるように修正
• ライセンスのあいまいな部分を修正

サンプルのページについてのお詫び

上でいくつか張ってあるリンクもそうなのですが、 以前、flashcanvas.net のデモのページを訪れた方は、 サンプルが正常に表示されない可能性があります。

実は、Apache の mod_expires モジュールの設定にミスがありました。 そのため、しばらくの間、古い flashcanvas.js や flash10canvas.swf のキャッシュが使われてしまうと思います。 その場合は、アーカイブファイルをダウンロードし、その中に同梱されているサンプルの方をご覧下さい。 ご面倒をおかけしますが、よろしくお願いします。

ダウンロード

• FlashCanvas ウェブページ
• ダウンロード

Tags: IE Canvas | | | | Permalink

■ FlashCanvas Pro のライセンスの変更について

ライセンスの変更点

FlashCanvas Pro のライセンスについて、いくつかご意見を頂きました。 それらの意見を参考に、ライセンスの文章に次のような変更を加えようと思います。

• sublicense, and/or sell copies of the Software の部分を削除する
• free of charge の部分を、非商用利用の場合に限定する

修正後のライセンスは、次のようになります。

FlashCanvas Pro

Copyright (c) 2009      Tim Cameron Ryan
Copyright (c) 2009-2010 Shinya Muramatsu

Permission is hereby granted, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


The Software is available free of charge for non-profit use. Any person who uses the Software for commercial purposes is subject to the following conditions:

1. He/She must pay a licensing fee to the licensor.
2. The licensee cannot sell copies of the Software or any derivative works.

誤解されると困るので書いておきますが、このライセンスは MIT ライセンスとは違います。 ただし、MIT ライセンスを少し厳しくしたもの、と考えると理解しやすいと思います。

なぜ MIT ライセンスをベースにするのか？

MIT ライセンスは非常に制限のゆるいライセンスで、私も好んで使っています。 基本的には自由に使って構いません、という意図を伝えるのに適したライセンスだと思います。

また、私にとって、MIT ライセンスは非常に分かりやすいライセンスです。 他のライセンスの文章もいろいろ読んでみましたが、はっきり言って、さっぱり意味が分かりませんでした。 何を言っているのか分からないようなライセンスを、他人に押し付けることはしたくありません。

Creative Commons の非商用のライセンスにしてはどうか？

私は、Creative Commons のことを、ソフトウェアに対しては使いづらいライセンスだと思っていたのですが、 改めて調べてみたところ、こんな説明を見つけました。

• Can I use a Creative Commons license for software?

やはり、Creative Commons にするのは避けた方が良さそうです。

既存の他のライセンスを利用した方が良いのでは？

ライセンスに関する私の希望は上に書いた通りなのですが、 どうも、それにぴったりと合うライセンスが見つけられませんでした。 結局、私の言いたいことを伝えるためには、 ライセンスを１から書くか、既存のライセンスに修正を加えるしかないと思います。

素人がライセンスをいじっているので、抜け穴があるかもしれませんが、 それならそれで、徐々にライセンスを修正していけばいいと思っています。

繰り返しになりますが、私は、「完璧だが意味の分からないライセンス」より、 「不完全かもしれないが言いたいことは分かるライセンス」にしたいのです。

| | | | Permalink

■ FlashCanvas Pro 1.1beta2 を公開

FlashCanvas Pro 1.0 は drawImage() メソッドに不具合があったのですが、それをほぼ修正できました。 まだ他の部分にも修正を加える予定なのでベータ版扱いにしますが、 興味のある方は試してみて下さい。

• FlashCanvas ウェブページ
• Download FlashCanvas Pro 1.1beta2
• Download FlashCanvas Pro 1.1beta3

FlashCanvas Pro 1.0 からの変更点：

• fillText(), strokeText() の高速化
• drawImage() の高速化
• ExplorerCanvas の draw-image-flip.html のサンプルが正常に表示されなかったのを修正
• 指定したのと違う順番で、画像が表示されることがあったのを修正
• toDataURL() を JPEG フォーマットにも対応
• 右クリックメニューに、"Save Image As..." の機能を追加
• CPU time の消費を軽減 (1.1beta3)

(2010/03/01 追記)

FlashCanvas Pro 1.1 をリリースしましたので、ベータ版のファイルは削除しました。

Tags: IE Canvas | | | | Permalink