HTML5　Canvasでアニメーション　【入門編　第６回】

Canvas用のタグを仕込みます。
webページの表示させたい部分に以下のタグを記述すればOKです。

1
<canvas id='sample' width='横幅' height='縦幅'>
処理用の関数を用意します。
ページがロードされると読み込まれるようにしたいため、以下の関数の中に処理を書いていきます。

1
2
window.onload　=　function(){
}
描画コンテキストの取得
この中でまずやらないといけないのが描画領域の制御情報（描画コンテキスト）を取得することです。
Canvasに描画するのでそのコンテキストを取得しなければなりません。先ほど項目１で仕込んだキャンバスのIDから
コンテキストを取得します。

1
2
3
4
var canvas = document.getElementById('sample'); // タグで仕込んだキャンバスのIDを指定してください。
if (canvas.getContext){
context = canvas.getContext('2d');
}

後はこのコンテキストに対して「fillRect」「fillStyle」などの関数を使用して描画していきます。

繰り返し処理をさせる関数を作成する
項目３で取得したコンテキストに描画しただけでは静止画となります。
さきほど述べたように描いて消して描いて消してを繰り返す必要があるので繰り返し用の関数を用意します。
この関数をタイマーを使用して指定時間ごとに呼び出し続けることで、繰り返し処理を行います。
適当にmain_loopとしておきます。このループ用関数が終了するたびに次に呼び出す時間を指定します。

function main_loop(){
    物体の移動など何らかの処理
    clearTimeout(timer);    // timer変数は項目１の関数内で宣言しておいて下さい
    timer = setTimeout(main_loop, 50);    // 50ミリ秒後に再度main_loopを呼び出すようセットしてます
}

あとは何をさせるかをコードするのみです。
ためしに簡単な物体移動をさせるコードを書いてみます。
ここで使用する描画系の関数は以下のようになっています。
円を描く「arc」
引数はx座標、y座標、半径、弧の開始角度、弧の終了角度、反時計回りに作成するかどうか　となってます。
画面を消す「clearRect」
引数は左上のx座標、y座標、横幅、縦幅　となってます。

画面の中段からボールを角度45　初速60で飛ばしています。

window.onload=function(){
     var point1 = {x:0,y:120};
     var timer;
     var canvas;
     var context;
     var t = 0;
 
     var mode = 2;
 
    //描画コンテキストの取得
    canvas = document.getElementById('test');
    if (canvas.getContext) {
 
        context = canvas.getContext('2d');
    }else{
        return;
    }
    main_loop();
 
    function main_loop(){
        //画面を一旦消去
        context.clearRect(0,0,240,480);
 
        context.beginPath();
        context.arc( point1.x, point1.y, 10, 0, Math.PI*2, false);
        context.fill();
 
        t++;
        //実際の物理法則だと以下の式ですがすぐ画面から消えます　空気抵抗は考えてません
        //座標は左上が(0,0)となるので上昇するとき（y軸変化）は数値を減らしていきます
        point1.y = 120 - 60 * Math.sin(45 * (Math.PI / 180)) + 9.8 * t * t /2;
        point1.x = 0 + 60 * Math.cos(45 * (Math.PI / 180)) * t;
 
        //画面から消えたらもとに
        if( point1.x > 240 || point1.y >240){
 
            t = 0;
            point1.x = 0;
            point1.y = 120;
        }
 
        clearTimeout(timer);
        timer = setTimeout(main_loop,100);
    }
}