javascript canvas fps 帧速率计算

最新推荐文章于 2025-05-27 09:09:08 发布

power0405hf

最新推荐文章于 2025-05-27 09:09:08 发布

阅读量5.3k

点赞数

分类专栏： javascript 前端

前端同时被 2 个专栏收录

47 篇文章

订阅专栏

javascript

23 篇文章

订阅专栏

本文介绍如何使用HTML5 Canvas API实现简单的动画效果，包括球体的移动、碰撞反弹及颜色渐变等特性。通过JavaScript代码控制帧率，实现了流畅的动画演示，并提供暂停与播放功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    paused = true,
    discs = [
        {
            x:150,
            y:250,
            lastX:150,
            lastY:250,
            velorityX:-3.2,
            velorityY:3.5,
            radius:50,
            innerColor:'rgba(255,100,0,1)',
            middleColor:'rgba(255,100,100,0.7)',
            outerColor:'rgba(255,255,255,0.5)',
            strokeStyle:'green'
        },
        {
            x:150,
            y:75,
            lastX:150,
            lastY:75,
            velorityX:1.2,
            velorityY:1.5,
            radius:25,
            innerColor:'rgba(255,0,0,1)',
            middleColor:'rgba(255,0,255,0.7)',
            outerColor:'rgba(255,255,0,0.5)',
            strokeStyle:'orange'
        },
    ],
    numDiscs = discs.length,
    animationButton = document.getElementById('animationButton');

function drawBackground(){

}
function update(){
    var disc = null;

    for (var i =0; i < numDiscs; i++) {
        disc = discs[i];
        if (disc.x + disc.velorityX + disc.radius >
            canvas.width ||
            disc.x + disc.velorityX - disc.radius < 0)
            disc.velorityX = -disc.velorityX;
        if (disc.y + disc.velorityY + disc.radius >
            canvas.height ||
            disc.y + disc.velorityY - disc.radius < 0)
            disc.velorityY = -disc.velorityY;
        disc.x += disc.velorityX;
        disc.y += disc.velorityY;
    }
}

function draw(){
    var disc = discs[i];
    for (var i = 0; i < numDiscs; i++) {
        disc = discs[i];
        gradient = ctx.createRadialGradient(disc.x,disc.y,0,
                                            disc.x,disc.y,disc.radius);//放射渐变
        gradient.addColorStop(0.3,disc.innerColor);
        gradient.addColorStop(0.5,disc.middleColor);
        gradient.addColorStop(1.0,disc.outerColor);

        ctx.save();
        ctx.beginPath();
        ctx.arc(disc.x,disc.y,disc.radius,0,Math.PI*2,false);
        ctx.fillStyle = gradient;
        ctx.strokeStyle = disc.strokeStyle;
        ctx.fill();
        ctx.stroke();
        ctx.restore();
    }
}

//calculate frame rate
var lastTime = 0;
function calculateFps(){
    var now = (+new Date),
        fps = 1000/(now - lastTime);
    lastTime = now;
    return fps;
}

//以不同的帧速率来执行不同的任务
var lastFpsUpdateTime = 0,
    lastFpsUpdate = 0;

//Animation
function animate(time){
    var fps = 0;
    if (time == undefined) {
        time = +new Date;//+new Date()是一个东西;  +相当于.valueOf();
    };
    if (!paused) {
        ctx.clearRect(0,0,canvas.width,canvas.height);
        //drawBackground();
        update();
        draw();
        var now = + new Date();
        //console.log(now);
        fps = calculateFps();
        if (now - lastFpsUpdateTime > 1000) {
            lastFpsUpdateTime = now;
            lastFpsUpdate = fps;
        };
        ctx.fillStyle = 'cornflowerblue';
        ctx.fillText(lastFpsUpdate.toFixed() + ' fps',20,60);
        window.requestAnimationFrame(animate);
    }
}

//event handlers
animationButton.onclick = function(e){
    paused = paused ? false : true;
    if (paused) {
        animationButton.value = 'Animate';
    }else{
        window.requestAnimationFrame(animate);
        animationButton.value = 'Pause';
    }
}

//Initialization
ctx.font = '48px Helvetica';