<!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. Meth | 安装Linux Mint 18以后grub2 win10启动引导项丢失？？！！

    进入mint,打开终端输入:sudo update-grub2

  2. node.js常用的几个模块总结

    /** 一 util *      是 node 里面一个工具模块 ,node 里面几乎所有的模块 都会用到 在这个模块 *  功能: *      1 实现继承 这是主要功能 *      2 实现 ...

  3. request.getAttribute( "result");和request.setAttribute("result",username);

    request.setAttribute("result",username);在request对象中加入名为result的属性并附值为username,因为request对象是可 ...

  4. mysql复习增删改查

    select * from torder where status='退款申请' UPDATE torder SET `status`='退款申请' WHERE status='等待付款' and i ...

  5. Linq101-Partitioning

    using System; using System.Linq; namespace Linq101 { class Partitioning { /// <summary> /// Th ...

  6. [转]最详细的 HTTPS 科普扫盲帖

    转载自http://www.codeceo.com/article/https-knowledge.html 为什么需要https HTTP是明文传输的,也就意味着,介于发送端.接收端中间的任意节点都 ...

  7. Nginx反向代理配置配置实例

    为了节省支出,公司需要将分布在不同机器的站点都迁移到一台机器,而目前不同机器运行的是不同的web服务,部分是nginx,部分是apache,由于牵涉较多rewrite规则,为了节省修改功夫,打算迁移后 ...

  8. linux 命令及进程控制

    main.c  main.o/main.obj  main/main.exe          编译                连接 程序运行;      两步: gcc/g++  -c  mai ...

  9. 【USACO 1.3.4】牛式

    [題目描述 ] 下面是一个乘法竖式,如果用我们给定的那n个数字来取代*,可以使式子成立的话,我们就叫这个式子牛式. * * * x * * ---------- * * * * * * ------- ...

  10. Linux导航神器-----autojump

    对于命令行用户来说,频繁的cd和tab应该是日常工作中最多使用的命令了.特别对于重度用户来说,如果可以省去这么多cd和tab,将更多的时间做有意义的事该多好.其实Linux的学习过程本身就行这样.你会 ...