-_-#【Canvas】FPS

<!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>

时间： 2024-10-01 04:21:58

-_-#【Canvas】FPS的相关文章

-_-#【Canvas】转成黑白

function drawInBlackAndWhite() { var imagedata = context.getImageData(0, 0, canvas.width, canvas.height) var data = imagedata.data for (var i = 0, l = data.length - 4; i < l; i+=4) { var average = (data[i] + data[i+1] + data[i+2]) / 3 data[i] = data[

-_-#【Canvas】measureText, translate, drawImage

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <canvas id="canvas" width="600" height="600" style="background:gray"&g

接口和抽象类:Interface、abstract _【转】

一.接口接口是C#中很常见的工具,概念什么的就不说了,这里讲几个值得注意的小地方: 1.接口内部只能有函数.属性和事件的声明: interface IParent { void Show(); string Type { get; set; } event AddChildren Add; } 在接口中声明的成员都不需要访问修饰符(public,private等),因为接口成员的权限默认都是public,另外值得注意的是接口中之所以能够声明事件是因为事件就是委托的特殊属性. 接口不能是静态的,

【canvas】高级功能一变形

[canvas]Demo1 scale缩放 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片</title> </head> <body> <canvas id="wapper" width="1000" height="

【Canvas】树冠

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <canvas id='drawRect' width='300' height='300'></canvas> </body> </html> function d

【canvas】基础练习

Demo1[绘制一条线] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo 1</title> </head> <body> <canvas id="wapper" width="200" height="200&qu

转载_【译】Android Studio使用技巧系列之快捷键01

转自:[译]Android Studio使用技巧系列之快捷键01 打开类/文件/符号打开类 1 2 mac: cmd + o win/linux: ctrl + n 假设你要打开快速切换到如MainActivity.java的类,可以使用该快捷键然后输入MainA… 打开文件 1 2 mac: cmd + shift + o win/linux: ctrl + shift + n 和打开类相似,但是该快捷键可以打开工程目录下的任意文件.这可以快速帮你打开如AndroidManifest.xml

Python 系统学习梳理_【All】

Python学习 1. Python学习---Python安装与基础1205 2. Python学习---PyCharm的使用学习 3. Python学习---Python数据类型1206 4. Python学习---range/for/break/continue简单使用 5. Python学习---列表/元组/字典/字符串/set集合/深浅拷贝1207[all] 6. Python学习---文件操作的学习1208 7. Python学习---函数的学习1209[all] 8. Python学

【canvas】使用canvas压缩图片大小

------------恢复内容开始------------ 由于各种大大小小的原因,自己最近经历了一些面试,其中有一个面试题是这样的,使用canvas怎样压缩图片大小这道题给我问蒙了,因为我没用过canvas压缩图片回去查资料,发现手机端在上传图片的时候,调起相机拍照的时候超过2m了,所以用到canvas压缩,优化用户体验解决方法: 1. 将图片的file文件转成baseURL 2. 创建一个image表情去接受文件获取图片的宽高和比例. 3. 创建canvas画布设置画布的大小. 4.