<!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的更多相关文章

  1. -_-#【Canvas】回弹

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. -_-#【Canvas】转成黑白

    function drawInBlackAndWhite() { var imagedata = context.getImageData(0, 0, canvas.width, canvas.hei ...

  3. -_-#【Canvas】measureText, translate, drawImage

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. -_-#【Canvas】圆弧运动

    var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') var angle = 0 f ...

  5. -_-#【Canvas】

    context.lineWidth = 0.5 incorrect display lineWidth=1 at html5 canvas canvas.save() canvas.restore() ...

  6. -_-#【Canvas】导出在<canvas>元素上绘制的图像

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. -_-#【Canvas】绘制文本

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. Linu下的Mysql学习详解_【all】

    Linux下Mysql简介 1.什么是Mysql(MariDB) 1.数据库:存储数据的仓库    2.关系型数据库:mysql(主流用5.5,5.6), oracle        本质:二维表   ...

  9. Mysql 系统学习梳理_【All】

    0.Linux学习---CentOS 7编译安装MySQL 8.0 1.Mysql学习---SQL语言的四大分类 2.Mysql学习---基础操作学习 3.Mysql学习---基础操作学习2 4.My ...

随机推荐

  1. eclipse设置系统字体

    1. 打开eclipse-->Window-->Preferences-->General-->appearance-->Colors and Fonts, 点开后选择B ...

  2. [转] 多线程下变量-gcc原子操作 __sync_fetch_and_add等

    http://blog.sina.com.cn/s/blog_6f5b220601013zw3.html 非常好的原子操作,不用加锁:__sync_fetch_and_add GCC 提供的原子操作 ...

  3. Linux Terminal 控制终端的使用

    1. Open new Terminal:Ctrl + Alt + T 或者 Ctrl + Shift + N 2. Open Tab:Ctrl + Shift + T 3. Close Tab:Ct ...

  4. JDK5-枚举

    1. 使用普通类模拟枚举 public class Weekday { private Weekday() {} // 私有化 public static final Weekday MONDAY = ...

  5. 如何在macos下创建文件或者文件夹的快捷方式

    用的时间久了就发现一次次的打开finder的次数多了,每次打开每次都要一层层的去点开一个个文件夹,太复杂了,然而右键也没有windows中发送到快捷方式到桌面的选项 于是Google一下,按住comm ...

  6. CI 模型的使用M与C之间的调用

    CI是PHP一个比较轻,并且好用的一个框架 分层也是分的比较清晰的一个 这里先展示MODEL 放在application/models 目录下面user_model.php <?php clas ...

  7. Android开发笔记：安卓程序截屏方法

    1,基于Android SDK的截屏方法 (1)主要就是利用SDK提供的View.getDrawingCache()方法.网上已经有很多的实例了.首先创建一个android project,然后进行L ...

  8. 从cellForRowAtIndexPath 看cell的重用机制

    今天突然发现一个问题,由于对UITableViewCell 的重用机制不是很了解,让我纠结很久: 用过reloadData时候,会调用cellForRowAtIndexPath方法,但是请看以下2种c ...

  9. JavaScript_object(基于map和数组练习)

    JavaScript在编程过程中,不会像java那么方便,提供大量的API让开发这直接去调用,但底层也封装大量的工具让开发者写方法去实现, 以map为例,写简单的增删改查模拟java中的map: fu ...

  10. Linux shell日常命令和技巧

    转自:http://www.vaikan.com/linux-shell-tips-and-tricks/ 原文:http://www.techbar.me/linux-shell-tips/ 使用L ...