<!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. Android抓包工具Fiddler抓取数据

    1.手机端设置 2.Fiddler设置监听 Tools/Fiddler options 是否允许监听到https(Fiddler默认只抓取http格式的),首次点击会弹出是否信任fiddler证书和安 ...

  2. [转] Java中的访问控制

    可见/访问性 在同一类中 同一包中 不同包中  同一包子类中  不同包子类中   public  yes  yes  yes  yes  yes  protected   yes  yes  no   ...

  3. css.day01.eg

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. H5与Activity之间的通信(调用)

    1.通过H5页面的超链接尾部信息不同进行跳转(类似于URL拦截器) 例如:控件x的href="http://www.example.com/?menu_id=1", 在代码中添加w ...

  5. Linq101-Restriction

    using System; using System.Linq; namespace Linq101 { class Restriction { /// <summary> /// Thi ...

  6. MVC3 展示数据含有html代码处理，配合上篇发布的StringHelper

    @Html.Raw(@StringHelper.SubstringToHTML(Content,30)) StringHelper 地址:http://www.cnblogs.com/Jiawt/p/ ...

  7. Android之使用json进行网络数据交换

    JSON作为一种轻量级的数据交换格式,凭借其易于阅读和编写.易于解析.传输速度快等优点流行了起来.最近正好在学习Android端从服务端端取数据,Json便派上了用场.好,下面开始切入主题. 1.准备 ...

  8. JQuery中根据属性或属性值获得元素

    根据属性获得元素 1.比如要获取页面p标签中属性有id的元素 $("p[id]").css("color","red"); 根据属性值获得元 ...

  9. Linux安装配置mongodb

    1. 下载MongoDB 2. 解压文件到某目录下,然后重命名: [root@localhost var]# tar -xzvf mongodb-linux-i686-2.0.1.tar [root@ ...

  10. iOS加载启动图的时候隐藏statusbar + 指定启动图显示多少秒

    只需需要在info.plist中加入Status bar is initially hidden 设置为YES 补充一下,现在手机越来越快,在6+下面启动图一闪而过,而美工童鞋辛辛苦苦做的图就看不到鸟 ...