<!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. Java基础知识强化之IO流笔记19：FileOutputStream的三个write方法

    1. FileOutputStream的三个write方法:  void write(byte[] buffer)           Writes the entire contents of th ...

  2. C#学习第五天

    字符串的处理 string可作char的只读数组 下面这段字符表示访问每个字符: string myString="A string."; char myChar=myString ...

  3. PHP 实现ajax的接收

    Ajax界面: 首先,理解本质,就是普通的一个提交在无刷新的情况下发出请求后得到响应,然后去针对你需要 的情况来做行为. <!DOCTYPE html> <html> < ...

  4. 此方法显式使用的 CAS 策略已被 .NET Framework 弃用

    用vs2008开发的应用程序在vs2012中打开时提示如下: 此方法显式使用的 CAS 策略已被 .NET Framework 弃用.若要出于兼容性原因而启用 CAS 策略,请使用 NetFx40_L ...

  5. RESTful Web Services简单介绍

    近几年,RESTful Web Services渐渐开始流行,大量用于解决异构系统间的通信问题.很多网站和应用提供的API,都是基于RESTful风格的Web Services,比较著名的包括Twit ...

  6. AFNetworking使用详解

    导语: 众所周知,AFNetworking是目前IOS开发中非常受欢迎的第三方网络通信类库,同时AFNetworking对苹果官方NSURLConnection和NSURLSession进行了封装,使 ...

  7. 32.Spring-对象依赖.md

    [toc] 1.对象依赖的分类 Spring中,给对象属性赋值的方法: 构造函数 Set方法 p命名空间 自动装配 注解 1.1构造函数 构造方法通过配置文件中constructor-arg标签实现, ...

  8. mysql的limit经典用法及优化

    用法一   SELECT `keyword_rank`.* FROM `keyword_rank` WHERE (advertiserid='59') LIMIT 2 OFFSET 1;   比如这个 ...

  9. Spring+SpringMVC+Mybatis+MAVEN+Eclipse+项目完整环境搭建

    1.新建一个Maven项目,创建父项目. 2.创建子项目模块 3.创建javaWeb项目 4.创建后的项目目录结构 5.Maven文件配置 parent父项目pom.xml文件配置 <?xml ...

  10. 使用HTML+CSS，jQuery编写的简易计算器

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...