HTML5 Game - Testing Browser Animation Performance

Description

Testing Browser Animation Performance
Demo

<!DOCTYPE HTML>
<html>

<head>
    <script>
        //Tests the frame rate for a canvas display of a moving gradient.
        let interval = 1;//from  w  ww  .j a  v  a 2s .co  m
        let lastTime = 0;

        //GRADIENT variables.
        let gradC1X = -140;
        let gradC1Y = 0;
        let gradC1R = 15;
        let gradC2X = 0;
        let gradC2Y = 0;
        let gradC2R = 350;
        let gradSAngle = (Math.PI / 180) * 0;
        let gradEAngle = (Math.PI / 180) * 360;
        let gradRadius = 350;

        //FRAME RATE variables.
        let fpsCounter = 0;
        let fpsDisplay = 50;
        let fpsDisplayX = 60;
        let fpsDisplayY = 340;
        let fpsPromptX = 200;
        let fpsPromptY = 340;
        let fpsExplX = 65;
        let fpsExplY = 100;
        let fpsExplYD1 = 6;
        let fpsExplYD2 = 2;
        let fpsOffset = 100;
        let fps = 0;
        let fpsMultMax = 20;
        let fpsColor = "white";
        let fpsColorE = "white";
        let fpsColorL = "white";
        let fpsWidthL = 1;
        let fpsScreen = -1;
        let fpsAlphaL = .5;
        let fpsAlphaE = 1;
        let fpsFont = "bold 12pt arial";
        let fpsFontE = "bold 11pt arial";
        let fpsTitle = "Frame Rate:";
        let fpsLineCt = 5;
        let fpsLineSp = 18;

        window.onload = function() {
            canvasFR = document.getElementById("canvasFrameRate");
            contextFR = canvasFR.getContext("2d");
            canvasGR = document.getElementById("canvasGradient");
            contextGR = canvasGR.getContext("2d");

            canvasFR.addEventListener("mousedown", screenChange, false);
            canvasFR.addEventListener("touchstart", screenChange, false);
            canvasFR.addEventListener("touchmove", screenChange, false);
            canvasFR.addEventListener("touchend", screenChange, false);

            function screenChange(event) {
                fpsScreen = -fpsScreen;
            }

            frameRateTest();
        }
        function frameRateTest() {
            contextGR.translate(canvasGR.width / 2, canvasGR.height / 2);

            let intervalID = setInterval(drawFrameRate, interval);

            function drawFrameRate() {
                let date = new Date();
                let time = date.getTime();
                let timeDiff = time - lastTime;
                fps = 1000 / Math.max(timeDiff, 1);
                lastTime = time;

                fpsCounter++;

                if ((fpsCounter > fpsDisplay) && (timeDiff > 1)) {
                    fpsCounter = 0;
                    frameRateDisplay();
                }
                contextGR.clearRect(-canvasGR.width / 2, -canvasGR.height / 2, canvasGR.width / 2, canvasGR.height / 2);
                contextGR.rotate(((Math.PI) / 180));
                let gradRO = contextGR.createRadialGradient(gradC1X, gradC1Y, gradC1R, gradC2X, gradC2Y, gradC2R);
                gradRO.addColorStop(1, "silver");
                gradRO.addColorStop(.9, "black");
                gradRO.addColorStop(.8, "purple");
                gradRO.addColorStop(.7, "magenta");
                gradRO.addColorStop(.6, "gold");
                gradRO.addColorStop(.5, "darkturquoise");
                gradRO.addColorStop(.4, "orange");
                gradRO.addColorStop(.3, "lime");
                gradRO.addColorStop(.2, "blue");
                gradRO.addColorStop(.1, "springgreen");
                gradRO.addColorStop(0, "yellow");

                contextGR.fillStyle = gradRO;

                contextGR.beginPath();
                contextGR.arc(0, 0, gradRadius, gradSAngle, gradEAngle, false);
                contextGR.fill();

                function frameRateDisplay() {
                    contextFR.clearRect(0, 0, canvasFR.width, canvasFR.height);

                    contextFR.font = fpsFont;
                    contextFR.fillStyle = fpsColor;

                    fps = fps.toFixed(0);

                    contextFR.fillText(fpsTitle, fpsDisplayX, fpsDisplayY);
                    contextFR.fillText(fps, fpsDisplayX + fpsOffset, fpsDisplayY);
                }

            }
        }
    </script>
</head>

<body>
    <div>
        <canvas id="canvasGradient" width="500" height="350" style="border:2px solid black;
                 position:absolute; left:auto; top:auto;
                 z-index: 2">
        </canvas>
        <canvas id="canvasFrameRate" width="500" height="350" style="border:2px solid black;
                 position:absolute; left:auto; top:auto;
                 z-index: 3">
            Your browser doesn't currently support HTML5 Canvas.
        </canvas>
    </div>
</body>

</html>
HTML5 Game - Testing Browser Animation Performance

Description

Demo

Related Topics
