2009-12-23

とあるjavascriptの画像生成

とある




方向

色合い
科学色(赤) 魔術色(青)

元ネタ:とある櫻花の画像生成とある画像の自動生成<ジェネレータ>

HTML5のcanvasを使ってやっつけ仕事。グラデーションは面倒なのでやめた。SilverLightやサーバーサイドは、もはや過去の遺物である。これからはクライアントサイドのみで、これぐらいやるのが当たり前になるべきだ。フィード経由で閲覧している人は、ご面倒ではございますが、直接見ていただいくようお願いいたします。

主要ブラウザでテストしてみた結果。
Chrome, Safari: 完璧
Firefox: なぜか@MS ゴシックが意図通りに描画されない。
Opera: canvasの文字列描画をサポートしていない。
IE: えーと……とりあえずお前はカエレ。

グラデーションは、思いのほか簡単だった。

10 comments:

egtra said...

私はWindowsでSafari 4を使っていますが、振り仮名(インデックス)の部分が縦書きにならず、横書きを90度回転させた表示になっています。Google Chrome 3では、縦書きになっています。これは、Safariのほうが意図していない結果ですよね?

hito said...

手持ちのsafari4.0(530.17)は、問題なく動作するのですが。

Anonymous said...

よく「ッ」の位置をChromeと見比べてください。「横書きを90度回転させたもの」と「縦書き」は異なります。あとうちの環境だとSafariでは明朝体の部分が文字化けしまくってますが、これはたぶんインストールされているフォントのせいでしょう。

Anonymous said...

あ、こっちで確認したのは Safari 4.0.4 (531.21.1.0) なので、4.0 (530.17) では違うのかもしれませんが、わざわざ古いバージョンを探し出してインストールして確かめるつもりはありません。やっぱりユーザーはどうしようもないアホだからブラウザは強制アップデートすべきですね。

hito said...

ありゃ。なんでアップデートされないんだろう。

hito said...

アップデート完了。描画結果は変わりませんね。
ただ、safariはcanvas Textにおける@MS ゴシックの描画に問題があるようです。

実を言うと、Canvasに文字列の縦書きなんて機能はないのです。
これは、@MS ゴシックで描画して、90度時計回りに回転させているだけなのです。

Anonymous said...

フォント名に「@」を付けるとラインプリンタ縦書き用のフォントになるというのはWindows独自の仕様なので、Firefoxでは故意に殺してあります。現にMacのSafari 4では「インデックス」の表示がFirefoxと同様、横倒しになります。

hito said...

あー、そうか。
本来、ブラウザによってネイティブに縦書きのサポートが提供されているべきなのですけどね。
CSS3の縦書きプロパティは、IE以外は、あまりサポートする気配がありませんね。
canvas Textも、将来的には、CSSを指定した、HTMLでマークアップされたテキストを描画出来るようになるかもしれない、
という注釈が、規格に書いてあります。

まだまだ、長い道のりですね。

egtra said...

ああ、それで分かりました。私のところで縦にならないのは「フォントの滑らかさ」を「中 - フラットパネルに最適」を選んでいるためでした。「Windows 標準」を選択すれば、インデックスの部分も縦に描画されますね。

Anonymous said...

IE9PP3では罵倒されなくなったのでやってみたところ、
・方向や色合いを切り替えるのに1回余分にクリックする必要がある。
・縦だと「インデックス」が描画されない。横では問題なし。
など微妙に問題も残ってますがおおむね動くようになった模様。
Silverlightの立場は…。