HTML5 Canvas と JavaScript を使って作る追尾サンプル 01 – メインループを作成, 円を描画

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

今回は, メインループを作成し, 円を描画してみましょう!!

SAMPLE

今回制作するサンプルはこちら.

VIDEO

チュートリアルムービー

CODE

今回制作したサンプルの script 部分です.

// 定数
var FPS             = 60;
var SCREEN_WIDTH    = 640;
var SCREEN_HEIGHT   = 480;

// グローバル
var global = {};
global.context = null;

window.onload = function()
{
    init();
    run();
};

var init = function()
{
    var canvas = $id("c");
    global.context = canvas.getContext("2d");
};

var run = function()
{
    var _run = function()
    {
        update();
        draw();
        
        setTimeout(_run, 1000.0/FPS);
    };
    
    setTimeout(_run, 1000.0/FPS);
};

var update = function()
{
    
};

var draw = function()
{
    var ctx = global.context;
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
    
    // 円を描画
    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.arc(100, 100, 20, 0, Math.PI*2, false);
    ctx.fill();
    ctx.closePath();
};

TIPS

ループ処理する

下記のコードでループ処理を行なっています.

var _run = function()
{
    update();
    draw();
    
    setTimeout(_run, 1000.0/FPS);
};

setTimeout(_run, 1000.0/FPS);

1000.0/FPS 秒間隔で update() と draw() を実行しています.

よく setInterval を使用しているのを見かけますが, 色々と危険(今は大丈夫なのかな?)なので使用しないように!!

円を描画する

context の arc 関数で円形のパスを描画し, パス描画後に fill() を実行することで円形に塗りつぶすことができます.

context.arc(x軸上の値, y軸上の値, 半径, 開始角度, 終了角度, 反時計回り?);

基本, 開始角度(0), 終了角度(Math.PI*2), 反時計回り?(false)で使用することになると思います.

色を設定する

fill() した際に塗りつぶす色は context.fillStyle プロパティ, stroke() した際にパスに沿って塗られる色は context.strokeStyle プロパティで指定できます.

CSSカラー文字列を指定することで変更できます.

context.fillStyle   = "rgb(255, 0, 0)";
context.strokeStyle = "#00f";
次回はこのサンプルのコア部分, Circle クラスの定義を行います.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT