HTML5のcanvas要素とJavaScriptを試してみました。
まだIEだと見れないと思います。
こちら、Mac版FirefoxとSafariのみでしか確認してません・・・（ちゃんとやれよっ・・・て？）
Flashじゃないですよ。
さて、次世代のHTML5、新要素として結構アツいcanvas要素。
グラフを書いたり、ゲームを動かしたり・・・いままでFlashやJavaアプレットとかいう技術で表現していたものが遂にブラウザベースで実現出来るようになる、らしい。
で、canvas要素に使うJavaScriptで「とりあえず丸が描けたっ！やった〜」なんてよろこんでいるしょうもない大人ですが、世の中にはすごい人たちがいっぱいいますね？
こんな人たちにはまだまだ追いつかないにしても、とっかかりで簡単な所からやってみました！！
参考サイトはこちらです。
HTML5.JP - 次世代HTML標準 HTML5情報サイトhttp://www.html5.jp/
ActionScriptでいうGraphics.drawCircle()的なメソッドを使って円を描き、久しぶりに使ったsetInterval()で繰り返し処理をして座標を入れ直す、というやり方は基本中の基本ですね。
まずは新要素、canvasを使ってbody内にこんな風に書いてみます。
id名をつけたのは、JavaScriptでそのままid名をgetして来るためです。そうなるとこれ。 ところが、canvas要素で描画するには、canvas要素の「コンテキスト」なるものを取得する必要があるらしいです。記述はこんな感じです。 ところで、canvas未対応のブラウザは処理しないように、条件文をつけて、対応ブラウザのみ動作するようにしましょう。 今回は、ctxという変数にcanvasのコンテキストを与えたので、この変数にドットでつないで命令する、これはAS3でも同じ考え方、、ってイメディオのセミナーの受講生さんに言ってるんだけど、理解してくれるのに時間がかかるもんです。まあ、それはさておき、、 これで描画を始めるよ！という意味で・・・ これで描画を終わるよ。 と言う意味なんですが、最後に「描画しなさい！（正確には塗りつぶそうぜ）」と命令することによって描かれるので以下を忘れてはいけません。 と、いうわけで、body要素内にコレだけ描けば、円が描かれるはずです。 （ブラウザによる、、、なんといい加減な説明ですが。IEは無理。）