<!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. CentOS 6.4的安装--史上最全-CRPER木木

    安装工具及软件: VmwareWorkstation9 CentOS-6.4-x86_64-LiveCD Vmware初始设置:           刚装好的VMWARE启动后,虽说默认已经设置好基础 ...

  2. 全球最低功耗蓝牙单芯片（DA14580）系统架构和应用开发框架分析

    DA14580是Dialog公司研制的蓝牙单芯片,号称全球功耗最低,是TI CC2541的四分之一,是运动手环等穿戴类电子产品的常用芯片.但是DA14580的开发门槛不低,适合有蓝牙开发经验的团队来开 ...

  3. Web站点架构设计考虑的因素

    转自http://blog.csdn.net/moshengtan/article/details/8990052 1    Web负载均衡 1.1 - 使用商业硬件实现 最经常使用的F5 与citr ...

  4. Android NDK 环境搭建 + 测试例程（转）

    懒得废话一大堆概念,关于ADT.NDK的概念要是你不懂,怎么会搜到这里来?所以你只需要根据下面的步骤来,就可以完成NDK环境搭建了. 步骤:(假设你未安装任何相关开发工具,如果已经安装了,就可以跳过) ...

  5. Sublime Text3使用详解

    Sublime Text简介 Sublime Text - 性感的代码编辑器.程序员之必备神器 Sublime Text 是一个代码编辑器,也是HTML和散文先进的文本编辑器.Sublime Text ...

  6. Android比较实用的属性

    ImageView //设置图片填充整个背景 android:scaleType="fitXY"

  7. Android中使用PullToRefreshListView遇到的问题

    1.布局文件中要是设置visible属性为Gone的时候,注意了,这样会有一个bug,在代码中setVisible的时候设置为VISIBLE是不起作用的..这个应该是自身的一个小bug(本人目前没有找 ...

  8. c - 递归年龄

    /* 题目:有 5 个人坐在一起,问第五个人多少岁?他说比第 4 个人大 2 岁.问第 4 个人岁数,他说比第3 个人大 2 岁.问第三个人,又说比第 2 人大两.问第 2 个人,说比第一个人大两岁. ...

  9. 抓取锁的sql语句-第四次修改

    --完成情况   变量V_BLOCKING_SID 用来动态抓取 产生锁的会话id,输出参数没有任何问题,但是执行报错  标识符无效! CREATE OR REPLACE PROCEDURE SOLV ...

  10. iOS 上传项目常见问题

    一. Archive项目 时,出现"Your build settings specify a provisioning profile with the UUID "XXX&qu ...