2009/08/05－2010/03/04

03/04 HTML5 のサンプルに置き換え。

JavaScript は個人的にあまり知らない言語なんで、ちょいとこちらも眺めてみる。
HTML5 の Canvas のグラフィクスあたりを眺めてみる。対象は Firefox 3.5。こちらまだ黎明の話なので、他のブラウザで動作するかどうか確認しないのであしからず。IE では動きません。Chrome や Safari など他のブラウザでどう見えるか？、同じように実行しているか？の比較テストサンプルぐらいに思ってください。

◎参考リンク
https://developer.mozilla.org/ja/Canvas_tutorial
mozilla Canvas チュートリアル


画像で注意書きがないものは Windows XP + Firefox3.5

 Canvasに文字や図形を描く

はじめの一歩は標準出力にハローワールドです。単純なグラフィクスや文字を表示します。

◎ TestCanvas001.html (2010/03/03 HTML5)
fillText() は Firefox3.5 以上、Opera10.5以上。これ以前は文字表示ができない。




◎ TestCanvas002.html (2010/03/03 HTML5)
装飾いろいろ。ドロップシャドーやらグラデーションやら。
ブラウザの場合は凝ったことをするとすぐに互換性の話が出てくるので、ま、ほどほどに。

上：Firefox3.6

上：Chrome 4.0
ボールのドロップシャドーの色の設定が必要か？。

上：Safari4.0
ドロップシャドーは、何か設定が必要？

上：Opera10.5
文字列の幅が Firefox や Safari より狭い点に注意。


◎ TestCanvasDraw01.html （2010/03/03 HTML5）
ドロー風味のサンプル。



ありきたりに静的な画像だと普通にドローソフトで画像ファイルで出せばええやんという話になるので、もう一工夫、プログラムらしい要素があるといいかも。

ドローデータ（ベクター画像フォーマット）に関しては SVG というのがあり、Firefox や Safari で表示できます。Chrome はどうなんかね？。

サンプル： TestSampleAlpha002.svg
上とほぼ同じ絵を SVG で書いたもの
SVGサンプル、SVGいろいろ

Canvas には、現在は、楕円の描画や多くの点をなめらかな曲線でつなぐ drawCurve 関数がないので、このあたりの関数があるともうちょい凝ったことができるかも？。


◎ TestCanvasDraw02.html （2010/03/03 HTML5）
ブロックダイアグラム風味のサンプル。


インテルも真っ青・・・少々、悪ノリモード・・・。


◎ TestCanvasGraph01.html (2010/03/03 HTML5)
グラフ風味のサンプル。



こちら外観デザインの部分だけのサンプル。データ変換などいたるところ工事中なので、足りない部分を考えてみましょう・・・というオチをつける。中身の方の話はこちらに続く。
HTML5 Canvasサンプル・グラフ編

 マウス入力を処理する

次の一歩は、標準入力（マウス）からの入力処理です。
マウスイベントというのを拾って処理します。

◎ TestMouseEvent02Div_XHTML.html （2010/01/24 XHTML1.0）


JavaScript マウス入力処理 を参照。

 マウスでグラフィクスを動かす

次に、標準入力（マウス）と標準出力（グラフィクス画面）を組み合わせます。

◎ TestCanvasMouseEvent01.html （2010/03/03 HTML5）
内容は、簡単な塗り絵のサンプル。
マウスでドラッグすると描画します。


以下、HTML5 Canvasサンプル・お絵かき編 に続く。


◎ TestPerspective2_1.html (2010/03/04 HTML5)
一点透視図法で線を描画します。マウスカーソルを画面上で移動させると、その位置が消失点になるように線を描きます。


TestPerspective2_1 にいろいろ説明。
上の JavaScript のサンプルの他に、Java, C#, Flash ActionScript のサンプルがあるので、他の言語と比較参考などにどうぞ。

 タイマー処理、アニメーション

標準出力（グラフィクス画面）、標準入力（マウス）ときたので、次は時間軸です。

◎ TestJSTimerInterval01.html (2009/12/27 XHTML)
カウントダウンします。




◎ TestCanvas_AnimeBall1.html (2010/03/04 HTML5)
ボールが跳ねまわります。
今回は色もどんどん変えます。ビットマップ画像を貼り付けて動かすだけではできない芸です。


処理性能を食うわけではないのだけど、多少ビリつくな。


◎ TestCanvas_AnimeSin1.html (2010/03/04 HTML5)
sin 波形を描画するアニメーションのサンプル。



上のサンプルを動かしたときの CPU使用率 （時間間隔25msec、PentiumM 1.3GHz, WindowsXP, Firefox3.5）


Javaアプレットなどで物理の物体の運動とか振り子のシミュレーションなどのプログラムを作ったことがある人々は、HTML の Canvas と JavaScript に注目すると面白いかもしれない。ちょっとしたものを手軽に作るのに最適です。

JavaScript教材のサンプル
ちと、このあたりを開拓してみる。

 矢印キー入力を処理する

古典的標準入力（キーボード）の処理です。通常の文字入力の処理ではなくて、矢印キーのリピート入力をリアルタイムで処理します。

キーボードからキー入力するとき、通常の文字入力では、キーを押したままにしたときにすぐにリピート状態になると文字が入力しづらいので、キーが押されてからリピート入力状態になるまで 500msec ぐらいの時間をあけます。リピート間隔も大きめの時間になります。で、これだとゲームの操作入力などすぐに応答してほしい処理には適さないので、そういう用途ではちょっと特殊な処理をします。

◎ TestCanvas_KeyEvent02.html (2010/03/04 HTML5)
矢印キーでボールを上下左右に動かします。同時に２つ以上のキーを押してもちゃんと処理します。



キー入力処理のソースは、下のホームページのサンプルをほぼ流用しています。定番の処理なので参考にどうぞ。
https://developer.mozilla.org/ja/A_Basic_RayCaster