CANVASでの曲線・回転運動

トップページプログラミング技術等CANVAS要素(HTML5)(導入)

画面上に配置したオブジェクトに様々な曲線・回転運動を行わせるJavaScriptの例を挙げる。
「上記のHTMLをブラウザで開く」を閲覧する際は、Google Chrome等を使用してください(IE8以前では表示されない)。

オブジェクトを放物線に沿って動かす

放物線に沿って動かすには、画像のx座標、y座標を、二次関数のグラフの上を動くように変化させればよい。
二次関数のグラフは、以下のようなものだった。

ここでは、x座標を0からスタートして少しずつ増やし、y座標はx座標の2乗の0.01倍で計算している。
y座標が300より大きくなったら、x座標を逆に少しずつ減らす事としている。
表示用のx座標、y座標の変数を別に用意し、x座標は画面の半分の長さを右にずらし、y座標は300から引いて上下反転させている。

上記のCANVAS要素を含むHTMLファイル
上記のHTMLをブラウザで開く

オブジェクトを円周に沿って動かす

円周に沿って動かすには、画像のx座標、y座標を、少しずつ大きくなる角の三角関数によって求めればよい。
円周上の点の座標と三角関数の関係は、以下のようなものだった。

JavaScriptでは、Math.cos(θ)等で、角θの三角関数を使う事が出来る。πはMath.PIとなる。
Math.cosで扱う角はラジアン表記なので、360度=2πの関係に従って換算する。これは、1度=π/180となるので、これに角度を掛ければよい。
なお、ここでは半径100pxとした。最後に補正して表示用の座標を作成している。

上記のCANVAS要素を含むHTMLファイル
上記のHTMLをブラウザで開く

オブジェクトの向きが変わるように回転させる

三角関数を使って座標を変えるだけでは、画像自体の向きは変わらない。
画像自体の向きが変わるように回転させるには、描画コンテキスト自体を回転させる事になる。
これは画面全体が回転すると考えてよい。画面上に複数の画像があれば、その位置関係を保ったまま、一緒に回転する。
コマンドはrotateとなる。描画コンテキストがctxという名前とすると、ctx.rotate (θ);となる。
ここでθはやはりラジアン表記で、一回の描画で動く角度を指定する。
画像を見ると分かるように、ctxの回転は左上端の原点を中心として行われる。いったん画面外に出た猫も、しばらくすると戻って来る。

上記のCANVAS要素を含むHTMLファイル
上記のHTMLをブラウザで開く

オブジェクトを中心に回転させる

左上端の原点中心ではなく、画像自身を中心にして回すには、いったん画像を左上端に移動して回転させ、元の位置に戻す操作を行う。
元の位置のまま回転させると大きく動いてしまうが、左上端の原点にその画像の中心が来るように移動させれば、そこで自分を中心に回転する事が出来る。
そこで向きの変わった画像を、また瞬時に元の位置に平行移動させれば、元の位置を中心に回転したように見える。

平行移動させるコマンドはtranslateで、描画コンテキスト自体を動かす事になり、ctx.translate(230,241);等と記述する。
引数は、x座標、y座標の移動量で、ここでは、画像の元の座標が200,200で、画像の大きさの縦幅、横幅の半分を其々加えた数字となる。x軸で230、y軸で241原点に近付ける事になる。
戻すときは、その数字に其々-を付ければよい。この二つのコードで回転する部分を挟む。

上記のCANVAS要素を含むHTMLファイル
上記のHTMLをブラウザで開く