<!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. EditText 密码属性

    <EditText android:id="@+id/et_password" android:layout_width="match_parent" a ...

  2. Fuel4D 2.1 免费跨平台游戏引擎 现已发布

    Fuel4D 2.1 免费跨平台游戏引擎 现已发布 开发环境:纯 C/C++,无JAVA.O-C. 支持 WIN32.安卓 系统. 详情见官方网站:http://www.fuel4d.com 或者进F ...

  3. [Falcor] Indroduce to Model

    How to work with JSON data indirectly through a Falcor Model. The Falcor Model allows you to work wi ...

  4. Codeforces 245G Suggested Friends - 交集set_intersection()

    一些人互相是朋友(无向图连一条无向边),现在要添加一个推荐朋友的功能,如果对于x,有y,x与y不是朋友,但是y和x有共同的朋友,并且共同的朋友最多,那么y可以推荐给x.问对于每一个人,有多少人值得推荐 ...

  5. HUD2087

    #include<iostream> #include<cstdio> #include<cstring> #define maxn 1010 using name ...

  6. HTML基础语句

    一,网页基础结构: 1 <html> 2 <head> 3 <title>我的第一个网页</title> 4 </head> 5 <b ...

  7. 高健壮性css---Float详细

    (一)关于float 首先我们了解到,CSS网页布局的原理,就是按照HTML代码中对象声明的顺序,以流布局的方式来显示它,而流布局就不得不说到float浮动技术..在HTML中的所有对象,默认分为两种 ...

  8. 【转】数据库分页Java实现

    [转]数据库分页Java实现 MySQL分页 主要是MySQL数据库内置LIMIT函数 注意添加mysql的JAR包mysql-connector-java-5.1.13-bin.jar 在中小数据量 ...

  9. JSON.parse和JSON.stringify 参数详解

    JSON.parse和JSON.stringify这两个浏览器自带(IE6/7除外)的方法平常我们经常用到,但是一般都只是用到了他们的第一个参数,比如字符串转对象:JSON.parse('{}')   ...

  10. SWT/RAP计算器

    /** *2.测试 */ public class NofTest extends AbstractEntryPoint {        Text text,text2;    RemoteObje ...