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 – メインループを作成, 円を描画 […]