2017.02.11
WEB

【HTML5を知ろう】 Canvasでアニメーション！①

おはようこんにちはこんばんは。

6年前のゲームを引っ張り出してプレイ中の
“みたらし”でございます(｀・Д・)ｲｲｶﾗﾄﾛﾌｨｰﾀﾞｯ!

第5回目はCanvasのアニメーションを弄っていきます！
長くなってしまったので、複数回に分けてやっていこうと思います。
(｀・ω・´)

1 下準備
2 動かすものをとりあえず表示してみる
3 円にアニメーションを付ける
4 もう一つ違う動きの物を作る
5 同じ領域内に複数表示する
6 参考文献

下準備

前回までは使いまわしをしてやっていましたが、
アニメーション確認用に色をわかりやすく、
かつ範囲が広いと確認しづらい為新しく用意します。


<!DOCTYPE html>
<html>
<head>
</head>
<body>

[HTML5を知ろう] Canvasでアニメーション！①

<div>
    <canvas width="300" height="300" id="sumple" style="background-color:rgba(0, 0, 0, 1);"></canvas>
</div>

</body>
</html>

上記のような感じでhtmlファイルを用意して下さい。
背景を黒に、範囲を300の正方形にしました！(｀・ω・)

Canvasアニメーション表示枠

今回はこれを作り替える感じで進めていこうと思います(｀・ω・´)

動かすものをとりあえず表示してみる

動かすものをとりあえず用意します。
前回までの内容を参考に円を用意しますが、
<script>の内容は<body>の中に書きます。

前回までは<head>の中に書いていたのですが、
アニメーションの場合<head>の中に書くと何故か上手く動作しないので(´・ω・｀)

また、”onload = function() {” の中で呼び出さなくても、
問題無く表示できるようなので該当の記述をなくしました(・ω・´)

それらを踏まえたソースが下記の物になります。


<!DOCTYPE html>
<html>
<head>
</head>
<body>

[HTML5を知ろう] Canvasでアニメーション！①

<div>
    <canvas width="300" height="300" id="sumple" style="background-color:rgba(0, 0, 0, 1);"></canvas>
</div>

<script>
function test() {
    var canvas = document.getElementById('sumple');
    var circle = canvas.getContext('2d');
        
    circle.beginPath();
    circle.arc(50, 50, 20, 0, 2*Math.PI, false);
    circle.fillStyle = 'white';
    circle.fill();
}

test();

</script>
</body>
</html>

表示するとこんな感じ。

Canvasアニメーション例1

白い円ができました！
こいつを動かしてみようと思います(｀・Д・)

円にアニメーションを付ける

アニメーションさせるには他にいろいろ設定してあげる必要があるので、
それらを追加して行きます。

Canvasのアニメーションはパラパラ漫画のようなイメージになっているらしく、
描く → 消す → 描く → 消す …
を繰り返しているそうです。
なのでそれ用の記述を追加し、
図形を描く処理は関数にして繰り返されるようにしてしまいます。

下記のような感じにscript部分を書き換えて下さい。


function test() {
    var canvas = document.getElementById('sumple');
    var circle = canvas.getContext('2d');
    var circle_w = canvas.width;
    var circle_h = canvas.height;
    var x = 0;
    
    (function circle_animation() {
        circle.clearRect(0, 0, circle_w, circle_h);
        
        circle.beginPath();
        circle.arc(x, 50, 20, 0, 2*Math.PI, false);
        circle.fillStyle = 'white';
        circle.fill();
        
        if (x > canvas.width) {
            x = 0;
        } else {
            x += 2;
        }
        requestAnimationFrame(circle_animation);
    })();
}

test();

表示すると円が右に動いていくのがわかると思います。
静止画なので動きません…

Canvasアニメーション例2

処理の内容としては、
一度描いたものを消す時の範囲指定用に

var circle_w = canvas.width;
var circle_h = canvas.height;

を追加。
移動する位置の変数用に

var x = 0;

を追加。

circle.clearRect(0, 0, circle_w, circle_h);

で一度描いたものをすべて消すようにし、
それを含めた円の描画処理を

function circle_animation() {

で関数にまとめ、

if (x > canvas.width) {
x = 0;
} else {
x += 2;
}

で現在位置がCanvasの指定範囲内であれば
xの値を2増加させて、

requestAnimationFrame(circle_animation);

でアニメーションさせています。

先程書いた通りCanvasは
描く → 消す → 描く → 消す …
を繰り返して描くので、
一度描いたものを消す処理がないと円が繋がって1本線になってしまいます(´・ω・｀)

Canvasアニメーション例3

circle.clearRect(0, 0, circle_w, circle_h);

を消すと上図のようになるので試してみて下さい(・д・｀)

もう一つ違う動きの物を作る

横に移動する物を作ったので、縦向きの物もやってみましょう(｀・ω・´)
単純な向きの変更は簡単で、図を描画するところの変動させる値を変えるだけです(´＝ω＝)

下記のようにソースを修正して下さい。


<!DOCTYPE html>
<html>
<head>
</head>
<body>

[HTML5を知ろう] Canvasでアニメーション！①

<div>
    <canvas width="300" height="300" id="sumple" style="background-color:rgba(0, 0, 0, 1);"></canvas>
</div>

<div>
    <canvas width="300" height="300" id="sumple2" style="background-color:rgba(0, 0, 0, 1);"></canvas>
</div>


<script>
function test() {
    var canvas = document.getElementById('sumple');
    var circle = canvas.getContext('2d');
    var circle_w = canvas.width;
    var circle_h = canvas.height;
    var x = 0;
    
    (function circle_animation() {
        circle.clearRect(0, 0, circle_w, circle_h);
        
        circle.beginPath();
        circle.arc(x, 50, 20, 0, 2*Math.PI, false);
        circle.fillStyle = 'white';
        circle.fill();
        
        if (x > canvas.width) {
            x = 0;
        } else {
            x += 2;
        }
        requestAnimationFrame(circle_animation);
    })();
}

test();


function test2() {
    var canvas = document.getElementById('sumple2');
    var circle = canvas.getContext('2d');
    var circle_w = canvas.width;
    var circle_h = canvas.height;
    var x = 0;
    
    (function circle_animation() {
        circle.clearRect(0, 0, circle_w, circle_h);
        
        circle.beginPath();
        circle.arc(50, x, 20, 0, 2*Math.PI, false);
        circle.fillStyle = 'white';
        circle.fill();
        
        if (x > canvas.width) {
            x = 0;
        } else {
            x += 2;
        }
        requestAnimationFrame(circle_animation);
    })();
}

test2();


</script>
</body>
</html>

表示するとこんな感じです。
静止画なので動きません(・ω・｀)

Canvasアニメーション例4

Canvasのタグを増やして領域を拡張し、
そのIDを指定して”test2″関数で描画しています。

関数が別になっていれば用意した変数名などは使いまわせます！
便利かどうかはわかりませんが(。＝ω＝)

同じ領域内に複数表示する

先程は別のCanvas領域を用意し、そこにもう一つの図形を描きましたが、
同じ領域内に複数の図形を描きたい場合もあると思います。

その場合は下記のようにscriptを書き換えて下さい。
2つ目のCanvas領域は使わないので消してしまいましょう(｀・ω・´)


function test() {
    var canvas = document.getElementById('sumple');
    var circle = canvas.getContext('2d');
    var circle_w = canvas.width;
    var circle_h = canvas.height;
    var x = 0;
    
    (function circle_animation() {
        circle.clearRect(0, 0, circle_w, circle_h);
        
        circle.beginPath();
        circle.arc(x, 50, 20, 0, 2*Math.PI, false);
        circle.fillStyle = 'white';
        circle.fill();
        
        circle.beginPath();
        circle.arc(50, x, 20, 0, 2*Math.PI, false);
        circle.fillStyle = 'white';
        circle.fill();
        
        if (x > canvas.width) {
            x = 0;
        } else {
            x += 2;
        }
        requestAnimationFrame(circle_animation);
    })();
    
}

test();

全く別の動きや図形を描く場合はもっと変数など増やさないとできませんが、
同じ図形を増やして移動方向を変えただけなので上記のような短い処理で実現できます。

表示するとこんな感じです。
静止画なので(

Canvasアニメーション例5