Taken SPC

Firefox 3 から canvas 要素で文字を描けるようになりました。で、その例を色々みてみると、描画内容を初期化するために canvas 要素の width と height プロパティを弄っている例が多いです。しかし ctx.clearRect() で十分です。

ただし ctx.clearRect() は ctx.translate() 等の変形の影響を受けるので、 ctx.save() と ctx.restore() をお忘れなく (あるいは ctx.setTransform(1, 0, 0, 1, 0, 0))。

ということで、higeorange さんの例を勝手に弄ってみます。higeorange さんのコードを以下に示します。

var canvas = $('cnvs');
    canvas.width = 300;
    canvas.height = 100;
var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, 300, 100);
    ctx.translate(10, 50);
    ctx.fillStyle = "Red";
    ctx.mozTextStyle = "30pt sans-serf";
    ctx.mozDrawText(txt);

ctx.clearRect() を使っておられるわけですが、たとえば以下のように書けます。

var canvas = $('cnvs');
var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, 300, 100);
    ctx.save(); // コンテクストの状態を保存
    ctx.translate(10, 50);
    ctx.fillStyle = "Red";
    ctx.mozTextStyle = "30pt sans-serf";
    ctx.mozDrawText(txt);
    ctx.restore(); // コンテクストの状態を save() した時の状態に復帰

あるいは以下のようにも書けます。

var canvas = $('cnvs');
var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, 300, 100);
    ctx.translate(10, 50);
    ctx.fillStyle = "Red";
    ctx.mozTextStyle = "30pt sans-serf";
    ctx.mozDrawText(txt);
    ctx.setTransform(1, 0, 0, 1, 0, 0); // 変形行列を単位行列に

• Drawing text using a canvas - MDC
• Canvas tutorial:Transformations - MDC

蛇足 1

蛇足 2

Bug-org 380338 は canvas 要素 2d コンテクスト (CanvasRenderingContext2D) のパス生成は座標変換の影響を受けるべきではない、というバグです。

HTML 5 仕様で CanvasRenderingContext2D のパスは、

• 作成するとき (moveTo(), lineTo() 等) は座標変換の影響を受けない
• 描画するとき (fill(), stroke() 等) に、その時点の座標変換を適用する

となっています。ところが Gecko の実装では

• 作成するとき (moveTo(), lineTo() 等) は座標変換の影響を受ける
• 描画するとき (fill(), stroke() 等) は、その時点の座標変換を無視する

と逆になっています。必ずしも全ての場合で問題がおこるわけではありませんが、Bug-org 380338 で言及されているテストケースは正しく表示されていません。

私が考えた解決方法は以下のような感じです。

パスを作成するとき (moveTo(), lineTo() 等)

• 座標変換を初期化
  • パスの作成
• 座標変換を元に戻す

パスを描画するとき (fill(), stroke() 等)

• 座標変換を初期化
  • 現在のパスを一旦コピー
• 座標変換を元に戻す
• コンテクストのパスを初期化
• コピーしていたパスを再度コピー
• パスを描画
• 座標変換を再度初期化
  • コンテクストのパスも再度初期化
  • コピーしていたパスを再度コピー
• 座標変換を再度元に戻す

本当に冗長なので他の方法がないかと思っているのですが、良い結果は得られていません。

whatwg のメーリングリストに [whatwg] Canvas shadow rendering というのが流れていました。そこにボカシ処理の例がでていたので、 canvas 要素の 2d コンテクストにはピクセル操作用の API があるので、実装しました。既に canvas 要素に描かれているものにたいして影を付けます。

• ドロップシャドウ

CanvasRenderingContext2D.getImageData/putImageData に対応したブラウザ (Firefox 2 以降等)で動きます。

手元の Firefox 2 では動きませんでした。Firefox Trunk では動作しました。

結果例

使いかた

適当にオプションをいじって Apply Shadow をクリックする。Redraw the canvas で一番下のテキストエリアに入っているスクリプトを実行。

オプション

Color

影の色を RGBA で指定します。R,G,B は 0 から 255、A は 0 から 1 までです。

Offset X/Offset Y

影をどれだけずらすか。

Blur-radius

ボカシの半径。

Debug

処理中の座標をウィンドウのタイトルに反映する

パフォーマンス

パフォーマンスは非常に悪いです。手元のマシンではボカシなし (Blur radius = 0) が 0.3 秒程度、ボカシありで 6,7 分程度かかっています。Firefox で応答の無いスクリプトダイアログが鬱陶しい場合は about:config で dom.max_script_run_time を 0 に設定してください。

tsune さんのコメントを適応したところボカシなし (Blur radius = 0) が 0.3 秒程度、ボカシありで 0.9 秒程度になりました 。

• Blur radius を 0 にすると (ぼかしなし) 速くなります。
• canvas 要素に描かれているものを少なくすると速くなります。
  • 例えば、Script for canvas の ctx.fillRect(50, 50, 50, 50); を ctx.fillRect(5, 5, 5, 5); にして、Redraw the canvas 。その後 Apply shadow

Bug 339553 - drawString enhancement for <canvas> は canvas 要素の 2D コンテクスト (CanvasRenderingContext2D) に 文字列関係の機能を追加するというものです。最新のパッチでは

• attribute DOMString textStyle;
• void drawText(in DOMString textToDraw);
• float measureText(in DOMString textToMeasure);
• void pathText(in DOMString textToPath);
• void textAlongPath(in DOMString textToDraw, in boolean stroke);

を追加しています。

文字列関係の API は HTML5 にも (まだ?) ないので独自実装という形になるのでしょうか。Rhino Canvas による提案ともまた違っています。レビューのコメントには moz 接頭辞を付けることとありますが、独自のコンテクスト (vendorname-context) の方が良いのではないかと思います。

canvas の 2D コンテクストの save()/restore() で保存/復帰できるのは描画の状態だけです。作成したパスや描画自体が保存されたり復帰したりすることはありません。そこで描画の保存と復帰を/自分で実装してみました。車輪の再開発だと思いますが。Firefox 2.0 以上と Opera 9 で動作します。

使いかた

1. まず、canvas_save_restore_image.js を読み込んでおく。
2. ctx.saveImage() で描画を保存
3. ctx.saveImage() で描画を復帰

例

サンプル

var ctx = canvas.getContext('2d');
// 処理
ctx.saveImage(); // この時点の描画 (描画1) が保存される。
// 処理
ctx.saveImage(); // この時点の描画 (描画2) が保存される。
// 処理
ctx.restoreImage(); // 描画2 が復帰される。
// 処理
ctx.restoreImage(); // 描画1 が復帰される。

既知の問題

• Opera 9/Firefox 2.0 では、restoreImage() は変形 (scale/rotate/translate) の影響を受けます。

  例えば、描画を復帰するときに座標系が回転していた場合、復帰された描画も回転してしまいます。Firefox Nightly では問題ありません。

Bug 5522 [canvas]transform, setTransform の実装(Bugzilla@Mozilla ? Bug 365886 Implement canvas transform() and setTransform())

Mozilla で canvas 要素の transform() メソッドと setTransform() を実装しました。2007 年 2 月 4 日付けの Trunk ビルドから使えるようになります。

Piro さんのおっしゃる行列変換もできるようになります。Rhino を使った Rhino Canvas に続いての実装ではないかと思います。

Mozilla に canvas3d のコードがチェックインされていました。まだ Web Applications 1.0 に仕様はありませんし、Opera 側からも音沙汰なしです。非常に実験的といえます。ビルドするには .mozconfig

ac_add_options --enable-extensions=default,canvas3d

を追加すればよいはずです。GLEW が必要なようで手元では libglew-dev パッケージをインストールする必要がありました。で、ビルドしてみたところ

make[6]: *** No rule to make target `-ljs3250', needed by `libcanvas3d.so'.  Stop.

とビルドに失敗してしまいました。

FPS というと Frames Per Second しか思い付かないのですが、Canvex は First-person shooter なるものです。これは canvas 要素を使っており、またゲーム画面の枠は SVG です。Fireofx 1.5 以上と Opera 9 以上でうごくとのことです。手元の Firefox Trunk では下の枠が下に来ていますがゲーム自体には影響ないようです。

自動扉があったり階段があったりする空間をあちこちに移動できます。敵をやっつけたりということはできないようです。画面やテクスチャの大きさも選べます。キーボードのヘルプもあります。ブラウザでこんなこともできるのかと思うくらいです。

パフォーマンスですが、移動していないときも再描画を行っているようです。手元の環境ではデフォルトの small で FPS は Opera 9 だと 30 程度、Firefox Trunk では 20 程度、Firefox Trunk で OpenGL アクセラレーションを使うと 40 程度でした。

、 、

7/1 に行われた Web 標準についてコーヒを片手に語り合う WaSP Cafe Vol.3 に参加してきました。以下で簡単にまとめてみます。順不同です。

もっと読む...

昨日 LinuxWorld 2006 に行ってきました。午後から .org パビリオンのもじら組のブースに居ました。そのときに持っていったデモ用のプログラムです。会場では来ていただいた方とゆっくりお話する時間もなくあまり見てもらうこともありませんでした。

A Client-Side Storage Demo

WHATWG による Web Application 1.0(HTML5/XHTML5) の Client-side session and persistent storage と Offline Web applications のデモ(taken.s101.xrea.com ドメイン用です)。コメントを投稿する前にタブやウィンドウを閉じてしまいせっかく書いたコメントが消滅という事態を防ぎます。Persistent storage( globalStorage ) の使いかたは

var storage = globalStorage['www.example.com'];
storage.setItem('comment', 'Test'); // 設定する
storage.comment = 'Test'; // 同じく設定する方法
var hoge = storage.getItem('comment'); //値を取り出す
var hoge = storage.comment; // 同じく値を取り出す方法

といった感じです。デモは Linux 版の trunk では動きました(その他のビルドでの動作確認はしていません)。 Offline/Online は navigator.onLine を見てやればよいです。

A PlotKit Demo

JavaScript のグラフプロッタ、 PlotKit を使ったデモ。表のデータを編集するとグラフも変化します。実はこれは行きの電車の中で作りました。テキストフィールドの編集を終了するにはフォーカスを失わせてください。グラフの表示には SVG ではなく canvas 要素を使いました。

PlotKit は MochiKit を使っているのですが MochiKit を知らない人間が作ったのでコードがグチャグチャになってます。

Technorati Tags

• Mozilla
• WHATWG
• PlotKit
• LinuxWorld Expo