Canvasに四角形を描画する

前回は、canvasを定義したhtmlファイルを作成しました。
今回は、javascriptという言語を使って、Canvasに赤い四角形を描画します。

解説

前回は、htmlファイルにcanvasを定義しましたので、

今回はjavascriptというプログラミング言語で四角形を描画する

プログラムを書きます。

まずは、グローバル変数を宣言します。

これは先ほど定義したキャンバス要素を格納する変数です

gはグローバル変数であることの接頭語あることを示したいので、書いています

これは、キャンバスのコンテキストです。

コンテキストは中身的な意味合いで使われています。

このような書き方をすると、必ず実行される関数になります。

 

次にループ関数を定義します。

 

次は60fpsでゲームを実行するために必要な処理を実行する関数を書くんですが、

ここは、長いのでコピペしてください。

fpsというのは、1秒間に何回処理が実行が実行されるかを

示す数値になります。

参照元をリンクしておくので、詳しい解説はそちらを参照してください。

 

最後に描画する関数を書きます。

 

これで、プログラムを書き終えたので、最後に確認してみましょう。

まず、firefoxなどブラウザを開いてもらって、htmlファイルをドロップしてみましょう

ちゃんと描画されることが確認できました。

main.js

var g_Canvas;
var g_Ctx;

/**
	onload
	最初に呼び出される関数
*/
onload = function () {
    // キャンバスに代入
    g_Canvas = document.getElementById(id_canvas'); 
    // cavasに対応していない
    if (!g_Canvas || !g_Canvas.getContext) {
        alert("html5に対応していないので、実行できません");
        return false;
    }

    g_Ctx = g_Canvas.getContext('2d');          // cox
    requestNextAnimationFrame(animate);		// loopスタート
};

function animate(now) {
    // 描画
    Draw();
    requestNextAnimationFrame(animate);
}

/*
	60fps毎に処理を実行
*/
window.requestNextAnimationFrame =
(function () {
   var originalWebkitRequestAnimationFrame = undefined,
       wrapper = undefined,
       callback = undefined,
       geckoVersion = 0,
       userAgent = navigator.userAgent,
       index = 0,
       self = this;

   // Workaround for Chrome 10 bug where Chrome
   // does not pass the time to the animation function

   if (window.webkitRequestAnimationFrame) {
      // Define the wrapper

      wrapper = function (time) {
        if (time === undefined) {
           time = +new Date();
        }
        self.callback(time);
      };

      // Make the switch

      originalWebkitRequestAnimationFrame = window.webkitRequestAnimationFrame;

      window.webkitRequestAnimationFrame = function (callback, element) {
         self.callback = callback;

         // Browser calls the wrapper and wrapper calls the callback

         originalWebkitRequestAnimationFrame(wrapper, element);
      }
   }

   // Workaround for Gecko 2.0, which has a bug in
   // mozRequestAnimationFrame() that restricts animations
   // to 30-40 fps.

   if (window.mozRequestAnimationFrame) {
      // Check the Gecko version. Gecko is used by browsers
      // other than Firefox. Gecko 2.0 corresponds to
      // Firefox 4.0.

      index = userAgent.indexOf('rv:');

      if (userAgent.indexOf('Gecko') != -1) {
         geckoVersion = userAgent.substr(index + 3, 3);

         if (geckoVersion === '2.0') {
            // Forces the return statement to fall through
            // to the setTimeout() function.

            window.mozRequestAnimationFrame = undefined;
         }
      }
   }

   return window.requestAnimationFrame   ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame    ||
      window.oRequestAnimationFrame      ||
      window.msRequestAnimationFrame     ||

      function (callback, element) {
         var start,
             finish;


         window.setTimeout( function () {
            start = +new Date();
            callback(start);
            finish = +new Date();

            self.timeout = 1000 / 60 - (finish - start);

         }, self.timeout);
      };
   }
)
();


/*
	Draw
	描画
*/
function Draw(){
	g_Ctx.fillStyle = "rgb(255,0,0)";		// 赤に設定
	g_Ctx.fillRect(0,0,640,480);			// 塗りつぶす
}