2010年5月9日日曜日

HTML5の Canvasで動くものを作ってみた

前回のHTML5の Canvasを使ってみたにて単純な三角形を作ってみました。

ただの三角形だとつまらないので、この三角形を動くようにしてみました!

三角形を動かす仕組みは、setIntervalを使って数秒おきに図形を描いています。

ただーし、図形を描くだけならすぐに出来るのですが、図形を消す方法がわからなかった。
ので、調べました!

context.clearRect(x,y,w,h)を使います!
消す方法はこれしか無いようです。
この関数の引数に消す範囲を渡します。そうすると、その範囲内の図形が消されます。

・ただ、三角形がウニョウニョ動くだけのソースです

・ブラウザが対応していれば、下記リンクから見れます
サンプル

1 件のコメント: