Opera で HTML5::Canvas の fillText() をサポートできないかな
Opera は、Text API(fillText, strokeText) や Shadow API をいつまでも実装してくれないので、Canvas をクロスブラウザで使う上でのネックになっています。最新の Opera10α でも サポートされていません。
Firefox2.x や Firefox3.0 でも Text API が使えません。
「ブーブー言うだけなら豚でもできる。でも俺たちは技術者だぜ?」ってなワケで、できるだけ近い形になるよう実装してみました。
やってることは単純で
- CanvasRenderingContext2D.prototype.fillText を上書する
- Canvas 要素の真上に div 要素を配置し、div.innerText = "テキスト" で描画。
- CanvasRenderingContext2D.prototype.clearRect もフックして fillTextの内容を消す
スケーリングもサポートする予定ですが、マトリクス変換(斜めに回転とか)やパターンフィルやグラデーションフィルはサポートできません。
テキストを上に描画するだけです。
追記
以下のブラウザで、HTML5::Canvas Text API の擬似的なレンダリングをサポートするように機能を追加しました。
- Firefox2.0系
- Firefox3.0系
- Opera9.2系
- Opera9.5系
- Opera9.6系
- Opera10.0系
また、Opera9.5x 以降なら、text-shadow を表現可能になりました。
制限事項等は以下になります。
- scale, rotate, translate, transform, setTransform の効果は無効です。
- globalAlpha は有効です。
- globalCompositeOperation の効果は無効です。
- fillText() は機能します。
- strokeText() は fillText() と同じ結果になります。
measureText() は { width: 0, height: 0 } の Hash オブジェクトを返します。TextMetrics Objectを返します。- fillStyle, strokeStyle には 色文字列("#ffffff" や "rgba(,,,)") が指定できます。グラデーションやパターンは指定できません(無効です)。
- shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor は Opera9.5x 以降で有効です。Firefox2.0, Firefox3.0 では無効です。
- font は有効です。
- textAlign
は無効です。"start"(デフォルト値, 左寄せ) が指定されたものとしてレンダリングします。は有効です。 - textBaseline は無効です。"top" が指定されたものとしてレンダリングします。
今回の機能拡張により、IE6+, Safari3+, Google Chrome, Firefox2+, Opera9.2x+ といったメジャーブラウザで、基本的な Text API が利用可能になります。
