【HTML5】Canvasで魔法陣が回転する動きを作る

Canvasで魔法陣を表示して回転させたくて色々調べてたら解決したのでここにまとめておきたい。

どんなかんじになるのかは動画で見たほうがわかりやすいと思うのでどうぞ

これは自分より小さい敵を食べるアガリオというゲームなのですが、このゲームはCanvasで描画されています。

それに魔法陣エフェクトを追加したものが上の動画です。

今回はこんなかんじでずっと回転し続ける魔法陣を表示する方法を簡単にまとめます。

魔法陣の画像を用意する

魔法陣はGoogle画像検索で素材を探せばすぐ出てくると思います。上の動画の魔法陣もGoogle画像検索で拾ったものです。

あとはニコニコモンズなどにもたくさん素材があります。

背景が透過された素材を用意してください。

JavaScriptを書く

魔法陣を描画するためにコードを書いていきます。

画像を読み込む

Canvasに描画する画像を読み込みます。

var magicCircleImage = new Image(); 
magicCircleImage.src = "image url here";

回転角度を定期的に変化させる

var magicCircleRotation = 0;
var magicCircleRad = magicCircleRotation * Math.PI / 180;
setInterval(function() {
if (magicCircleRotation < 360) magicCircleRotation += 2;
    else magicCircleRotation = 0;
    magicCircleRad = magicCircleRotation * Math.PI / 180;
}, 37);

JavaScriptコード。

setInterval関数で定期的に角度を変えます。

Canvasに描画する

ctxがcontextです。

ctx.translate(x, y); 
ctx.rotate(magicCircleRad);
ctx.translate(-x, -y);
ctx.drawImage(magicCircleImage, x - size, y - size, size * 2, size * 2);
ctx.translate(x, y); 
ctx.rotate(-magicCircleRad);
ctx.translate(-x, -y);

1. translateで回転中心を(x, y)にしてrotateで回転する
2. 画像をdrawImageで描く
3. 回転角度と中心座標を元に戻す

最初、これcanvasが回転するんじゃん！画像じゃないやん！と思ったんだけど

回転させたキャンバスに画像を描いてそれからまたキャンバスを回転した分だけ戻せば画像だけが回転しているようにみえるということだとわかって納得

当然ですが変数の定義は省略させていただいたのでそのままコードをコピペしてもエラーでます。利用用途によってx, y, sizeの値は変わるので省略しました。各自で調整して使ってください。