-_-#【Canvas】FPS_2d

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <canvas id="canvas" width="400" height="400" style="background:gray;"></canvas>
    <script>
        var canvas = document.getElementById('canvas')
        var context = canvas.getContext('2d')

        var lastTime = 0

        function calculateFPS() {
           var now = +new Date()
           var fps = 1000 / (now - lastTime)

           lastTime = now

           return fps
        }

        function animate() {
            context.clearRect(0, 0, canvas.width, canvas.height)
            context.font = '38px arial'
            context.fillText(calculateFPS().toFixed() + ' fps', 45, 50)
            window.requestAnimationFrame(animate)
        }

        window.requestAnimationFrame(animate)
    </script>
</body>
</html>