JavaScriptの練習:簡単なアニメ(ボールが動く)

業務系のアプリつくりが目的なんですが、やはりこういうのは避けて通れないみたいです。できたものはこちら
ボールがあっちこっちに動きます。canvasの端に来ると速度の符号を変えて完全弾性衝突のようになっているところが「ほーお」とうなづけるところでした。
アニメにするには、アニメのループ関数の中に「requestAnimationFrame(loop);」を入れて、loop()を一度、外から呼び出す必要があるようです。
あと、軌跡が残るのは、「ctx.fillStyle = ‘rgba(0, 0, 0, 0.25)’」で、0.25の半透明を指定しており、過去4回分が少しずつ色を薄めつつ残ることになります。うまくできています。


HTMLはこちら

JavaScriptはこちら。

CSSはこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください