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

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

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

[Agar.io on Cigar] Magic Circle Effects 🙂

これは自分より小さい敵を食べるアガリオというゲームなのですが、このゲームは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);