canvasをより速く(Flashもサポート)

js performance 高速化 uupaa.js HTML5

追記

2010-02-13: Flash モードを最新に差し替えました。boostも出来ます。

本文

uupaa.js には uuCanvas.js のコードが入ってましたが、色々と書き直して、またちょっと速くなりました。
また、レンダリングバックエンドに Flash を追加しました。

マルチバックエンドっす

これで、<canvas> + SVG, VML, Silverlight, Flash をドライブするコードが入りました。
具沢山ね。

デモ

以下のデモページを IE6〜IE8 で開くと、様々なバックエンドでレンダリングするようにしてあります。
# Firefox, Safari, iPhone, Google Chrome, Opera で開くと <canvas> でレンダリングします。

boost ボタンをポチッとすると、オレオレ拡張メソッド ctx.lock(), ctx.unlock() が発動し fps が +5〜+10 ぐらい UP します。CPU 負荷もちょっと下がります。

開発用 PC では

な感じです。

Flash が期待したよりも速くない

Flash の負荷 + JavaScript の負荷により、草食系PC では厳しい結果に。

バックエンドオーダー

バックエンドの探索は、デフォルトで以下のオーダーになっています。

  • Silverlight3+
  • Flash9+
  • VML

VML が最後です。

バックエンドオーダーの指定も可能

class属性に"flash", "sl", "vml" を並べると、オーダーを指定できます。

<canvas class="flash sl vml" width="300" height="150"></canvas>
動的にcanvasを作るときは

uu.canvas.create の第三引数でバックエンドオーダーを指定できます。

uu.canvas.create(width = 300, height = 150, order = "flash sl") -> <canvas>

コードもちょっと綺麗にした

コードが「くーろーまじゅーつー」だそうなので、シマウマぐらいに書き直した(つもりだ)よ。

何が大変って

  • Flash がなんだかちっとも速くならない
    • でも、10日前よりは大分速くなってる
  • 複数のバックエンドでレンダリング結果に互換性を持たせなきゃならない
    • シングルバックエンドならそんな面倒も無いんだけどね

な感じ

リンク

Web開発者で Silverlight をまだ入れてない方は、これを機会にちょこっとと入れてみてくださいな。

追記

最近のバージョンでは、以下の仕様変更が入ってます。

  • window.CanvasRenderingContext2D を定義しません(以前はしてました)
  • window.CanvasGradient を定義しません(以前はしてました)
  • window.CanvasPattern を定義しません(以前はしてました)
  • window.TextMetrics を定義しません(以前はしてました)
  • document.createElement をラップするようなムチャなコードはとっぱらいました(Safari3.x のサポートを廃止したので)
  • <canvas>を動的に作るには、uu.canvas() ではなく、uu.canvas.create() を使ってください。
  • canvas のリサイズは、ctx.resize(width, height) を呼んで下さい。
    • 速度を稼ぐため、canvas要素にonPropertyChangeハンドラを設定していません(前は設定してました)
    • canvas.width = 100; とやってもIEだと、ちゃんとリサイズできませんので気をつけて。

Flash モードの実装はまだスカスカですよ。