Canvasで箱が横に移動するアニメーションを作る

Canvasに今まで使ってきたコードを組み合わせるとアニメーションを作成することができます。今回はCanvas内で描写した青い箱を横に移動したいと思います。はじめにアニメーションの仕組みですが、Canvas上で箱を描いて、すぐにその箱を消す。消した直後に少しずらした位置にサイズの同じ箱を描写すれば動いている様に見えます。setIntervalで指定した時間毎に作成したdraw関数を実行する様にしましょう。

<script>
var canvas;
var ctx;

window.onload = function(){
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
  
    //0.02秒毎にdraw関数を実行する
    setInterval(draw, 20);
};

function draw(){
    ctx.beginPath();

    ctx.moveTo(20, 20);

    ctx.lineTo(20, 40);
    ctx.lineTo(40, 40);
    ctx.lineTo(40, 20);
    ctx.lineTo(20, 20);
  
    ctx.strokeStyle = "blue";
    ctx.stroke();  
}
</script>

前回のdraw関数をsetInterval関数で0.02秒(指定は20)毎に実行する様にします。この状態では、同じ箇所に重ねる様に何度もdraw関数を実行するという指示しかありません。次に箱の位置を少しずらすコードを追加します。

<script>
var canvas;
var ctx;

//X軸の位置が変更できるようにXの値を入れる変数を用意する
var mx = 20;

window.onload = function(){
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
  
    setInterval(draw, 20);
};

function draw(){
    ctx.beginPath();
  
    ctx.moveTo(mx, 20);
  
    ctx.lineTo(mx, 40);
    ctx.lineTo(mx + 20, 40);
    ctx.lineTo(mx + 20, 20);
    ctx.lineTo(mx, 20);
  
    ctx.strokeStyle = "blue";
    ctx.stroke();
  
    //mxに1加える
    mx = mx + 1;
}
</script>

X軸の値用にmxという変数を用意して、drawを実行する度にmxに1を足す様にして、mxの値を利用して四角を描写します。(mx + 20にすることで右辺の位置を指定できる様になる)

しかし、現時点でのコードだと、描写した四角を消さずに少しずらした点で再度四角を書くという処理が続くため、この画像の様にバー状の描写になります。次に四角を描写する度に四角を削除するという処理を追加します。

function draw(){

    //塗りつぶしの指示(パスを使っていないので、beginPathはいらない)
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, 400, 300);

    //ここから四角の描写
    ctx.beginPath();

    ctx.moveTo(mx, 20);

    ctx.lineTo(mx, 40);
    ctx.lineTo(mx + 20, 40);
    ctx.lineTo(mx + 20, 20);
    ctx.lineTo(mx, 20);

    ctx.strokeStyle = "blue";
    ctx.stroke();

    //mxに1加える
   mx = mx + 1;
}

draw関数の最初にfillStyleで白にしていて、fillRect関数でcanvasを塗りつぶしています。fillRect関数の引数は左から(Xの開始点, Yの開始点, 幅, 高さ)の指定なので、左端の0, 0からcanvasタグの属性に入れたwidthの400pxとheightの300pxを指定してcanvasタグを元のまっさらな状態に戻して、その後に青い四角を描写します。

これで四角が右側に移動するアニメーションができました。

<script>
var canvas;
var ctx;

var mx = 20;
var my = 20;

window.onload = function(){
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
  
    //0.02秒毎にdraw関数を実行する
    setInterval(draw, 20);
};

function draw(){
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, 400, 300);

    //ここから四角の描写
    ctx.beginPath();

    ctx.moveTo(mx, my);

    ctx.lineTo(mx, my + 20);
    ctx.lineTo(mx + 20, my + 20);
    ctx.lineTo(mx + 20, my);
    ctx.lineTo(mx, my);

    ctx.strokeStyle = "blue";
    ctx.stroke();

    //mxに1加える
    mx = mx + 1;

    //myに1加える
    my = my + 1;
}
</script>

こうすることで、箱が右下に移動するアニメーションが作成できます。