FPS を表示する JavaScript ライブラリ『Stats.js』 の使い方メモ

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

Pocket

FPS を表示する JavaScript ライブラリ『Stats.js』 の使い方メモ

Flash でお馴染みの Stats の js 版を発見したので使ってみました.

忘れないうちに使い方をメモ.

DEMO and DATA

デモサンプルはこちら.

Canvas 上に大量の四角形を乗算描画して fps を計測しています. 私の環境では, Chrome だと 30fps と安定していましたが, 乗算描画の苦手な firefox の場合 23fps 前後で表示されました.

Download

USAGE

使い方

FLOW

流れ

  • Stats.js をスクリプトタグで読み込む
  • Stats を生成
  • body エレメントに Stats.domElement を追加
  • 更新関数の中で Stats.update(); を実行

SAMPLE

下記はデモサンプルのコードです.

<!DOCTYPE html>

<html>
    <head>
        <meta charset=UTF-8>
        <title>Stats demo</title>
        
        <script src="Stats.js"></script>
        <script>
            var COUNT = 256;    // 描画する四角形の数
            
            window.onload = function() {
                // Stats 生成
                var stats = enableStats();
                // Canvas 生成
                var canvas = document.createElement("canvas");
                var context= canvas.getContext("2d");
                document.body.appendChild(canvas);
                
                setInterval(function(){
                    
                    stats.update();
                    
                    // クリア
                    context.globalCompositeOperation = "source-over";   // 乗算設定
                    context.fillStyle = "black";
                    context.fillRect(0, 0, canvas.width, canvas.height);
                    
                    // 四角形描画
                    context.globalCompositeOperation = "lighter";   // 乗算設定
                    for (var i=0; i<COUNT; ++i) {
                        var x = Math.random()*(300-16);
                        var y = Math.random()*(150-16);
                        context.fillStyle = "hsl(" + (360/COUNT)*i + ", 50%, 50%)";
                        context.fillRect(x, y, 16, 16);
                    }
                    
                }, 1000/30);    // 30fps
                
            };
            
            var enableStats = function() {
                
                if (window.Stats === undefined) return null;
                
                var stats = new Stats();
                // 右上に設定
                stats.domElement.style.position = "fixed";
                stats.domElement.style.right    = "5px";
                stats.domElement.style.top      = "5px";
                document.body.appendChild(stats.domElement);
                
                return stats;
            };
        </script>
    </head>
    
    <body>
        <h1>Stats Demo</h1>
    </body>
</html>

Reference

参考サイト

TRACK BACK URL

POST COMMENT

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

COMMENT