HTML5 Canvas と JavaScript を使って作る追尾サンプル 01 – メインループを作成, 円を描画
今回は, メインループを作成し, 円を描画してみましょう!!
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";
[…] 01 – メインループを作成, 円を描画 […]