<!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. 利用d3.js绘制雷达图

    利用d3,js将数据可视化,能够做到数据与代码的分离.方便以后改动数据. 这次利用d3.js绘制了一个五维的雷达图.即将多个对象的五种属性在一张图上对照. 数据写入data.csv.数据类型写入typ ...

  2. oracle日期时间函数总结

    常常写 sql 的同学应该会接触到一些 oracle 的日期时间函数, 比如: 財务软件或者人力资源软件须要依照每年, 每季度, 每月, 甚至每一个星期来进行统计. 今天闲来没事, 特意从网上整理了一 ...

  3. Creating a Navigation Drawer 创建一个导航侧边栏

    The navigation drawer is a panel that displays the app’s main navigation options on the left edge of ...

  4. 数据库 ORM框架 ORMLite

    几个ORM框架的比较 先介绍一下ORM的概念,以前也一直听说,不过没详细了解啥意思.其全称叫做对象关系映射(Object Relation Mapping),是一种程序设计技术,用于实现面向对象编程语 ...

  5. HTML5 History对象，Javascript修改地址栏而不刷新页面

    一.History对象 History 对象包含用户(在浏览器窗口中)访问过的 URL. History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问. ...

  6. SQL Server 2008中数据压缩

    SQL Server 2008中引入了数据压缩的功能,允许在表.索引和分区中执行数据压缩.这样不仅可以大大节省磁盘的占用空间,还允许将更多数据页装入内存中,从而降低磁盘IO,提升查询的性能.当然,凡事 ...

  7. java获取对象属性类型、属性名称、属性值 【转】

    /** * 根据属性名获取属性值 * */ private Object getFieldValueByName(String fieldName, Object o) { try { String ...

  8. ios 中的UI控件学习总结（1）

    UIKit框架提供了非常多功能强大又易用的UI控件 下面列举一些在开发中可能用得上的UI控件 UIButton 按钮 UILabel 文本标签 UITextField 文本输入框 UIImageVie ...

  9. java对mysql数据库进行单表筛选备份、还原操作

    最近在做的一个项目需要对mysql数据库中的单个表格进行备份 其中,一部分表格需要进行筛选备份(例如对最近插入的1000条记录进行备份) 思路:java调用系统命令完成备份操作 假设现在有数据库tes ...

  10. 装饰者模式（Decorator）

    首先来看一个例子: 比如,饮料可以分为很多种类,而这里我取一个咖啡,那么这个咖啡呢,有多种形式的, 比如有加糖了的咖啡,有加奶的咖啡,也有加热了的咖啡,也有加了冰块的咖啡. 而各个顾客的选择却是不同的 ...