無料ブログはココログ

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

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

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

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

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

つづく

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

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

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

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

コメント

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

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

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

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

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

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

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

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

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

コメントを書く

コメントは記事投稿者が公開するまで表示されません。

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/138594/49042576

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

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