码迷,mamicode.com
首页 > 其他好文 > 详细

-_-#【Canvas】FPS

时间:2014-12-29 16:44:50      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

<!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>

 

-_-#【Canvas】FPS

标签:

原文地址:http://www.cnblogs.com/jzm17173/p/4191956.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!