無料ブログはココログ

« [HTML5] fillTextを使わずにCanvasに文字を出力してみる | トップページ | [HTML5] fillTextを使わずに文字を出力してみる３(影付き) »

[HTML5] fillTextを使わずにCanvasに文字を出力してみる２

revuloさんや職場のプロに助言をいただいて、少しまともになりました。
Carageneout2実行する場合はここをクリックしてください。
firefox、Crome、iPhone等で動くはずです(IE+uuCanvas, IE+FlashCanvas)。拡大縮小をX・Y独立で指定できます。

今回はフォントのイメージも再作成しました。作成にGIMPを用いるとハーフトーンのところも半透明で、フォントサイズぴったりのイメージが作成できました。
透過レイヤでこのテキストをコピー＆ペーストすると作成できます(Yさん、情報ありがとうございました)。

夏休みにライブラリ化を試みる予定です。

つづく

2010年8月 3日 (火) パソコン・インターネット, ソフトウェア, プログラミング |

« [HTML5] fillTextを使わずにCanvasに文字を出力してみる | トップページ | [HTML5] fillTextを使わずに文字を出力してみる３(影付き) »

「パソコン・インターネット」カテゴリの記事

「ソフトウェア」カテゴリの記事

「プログラミング」カテゴリの記事

コメント

動作確認してみましたが、IE だと表示が崩れますね。excanvas を最新版に差し替えてもダメでしたので、よかったら拙作の FlashCanvas ライブラリを使ってみて下さい。
http://flashcanvas.net/

投稿: revulo | 2010年8月 3日 (火) 06時25分

FlashCanvasの作者の方でしたか、コメントいただけて光栄です。

そうですね。excanvasはだめなようです。uuCanvas, Flash Canvasだと動くようなので追加しておきました。

Flash Canvasはなかなか意欲的なプロジェクトですね。Flashが許されるなら良い候補だと思います(IE8+Flash10.0だとうまく行きましたが、IE6+10.12(チョット自信がありませんが最新を入れました)では、画面が白いままで、何も表示されませんでした)。

uuCanvasもSilverLightにもDrowImageで透明化が無効、斜めのグラデーションが無効など、いろいろあるので、Flash Canvasの今後に期待しています。

投稿: さかば | 2010年8月 3日 (火) 21時50分

IE6 & Flash Player 10.1.53.64 の組み合わせで試してみましたが、私の環境では表示されました。ただ、他のサンプルでの話ですが、リロードしないと表示されない場合があったりもしましたので、もし不具合を再現する条件について何か分かったら教えて下さい。

個人的には、このライブラリで http://www3.wind.ne.jp/DENZI/diary/ にあるようなファイルをフォントの代わりに読み込むと、面白いことができそうだと思っています。

投稿: revulo | 2010年8月 4日 (水) 06時43分

すみません。IE6で動作しなかったのはサーバを介さずにPC上のファイルを開いたからでした。失礼しました。

おっしゃるようにRPGはもちろんのこと、落ちゲー、インベーダーゲームなども向いていると思います。また、速度向上のためにCSSスプライトを利用するような場合にも、Canvasが中心なら使える場合があると思います。

投稿: さかば | 2010年8月 4日 (水) 22時50分

この記事へのコメントは終了しました。

トラックバック


この記事へのトラックバック一覧です： [HTML5] fillTextを使わずにCanvasに文字を出力してみる２:

« [HTML5] fillTextを使わずにCanvasに文字を出力してみる | トップページ | [HTML5] fillTextを使わずに文字を出力してみる３(影付き) »