5.2_帧速率的计算

最新推荐文章于 2023-07-23 16:02:19 发布
原创最新推荐文章于 2023-07-23 16:02:19 发布 · 1k 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#动画
HTML5_CANVAS练习案例专栏收录该内容
81 篇文章
订阅专栏
5.2_帧速率的计算

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>帧速率的计算</title>
        <style>
            body{
                background: #ddd;
            }
            #canvas{
                background: #fff;
                cursor: pointer;
                margin-left: 10px;
                margin-top: 10px;
                -webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
                -moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
                box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
            }
            #controls{
                margin-top: 10px;
                margin-left: 15px;
            }
        </style>
    </head>
    <body>
        <div id="controls">
            <input id="animateButton" type="button" value="Animate" />
        </div>

        <canvas id="canvas" width="750" height="500"></canvas>

    </body>
    <script>
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var paused = true; 
        var discs = [ //三个圆的各种属性
            {
                x:150,
                y:250,
                lastX:150,
                lastY:250,
                velocityX:-3.2,
                velocityY:3.5,
                radius:25,
                innerColor:'rgba(255,255,0,1)',
                middleColor:'rgba(100,145,230,0.7)',
                outerColor:'rgba(100,145,230,0.5)',
                strokeStyle:'gray'
            },
            {
                x:50,
                y:150,
                lastX:50,
                lastY:150,
                velocityX:2.2,
                velocityY:2.5,
                radius:25,
                innerColor:'rgba(100,145,230,1)',
                middleColor:'rgba(100,145,230,0.7)',
                outerColor:'rgba(100,145,230,0.5)',
                strokeStyle:'blue'
            },
            {
                x:150,
                y:75,
                lastX:150,
                lastY:75,
                velocityX:1.2,
                velocityY:1.5,
                radius:25,
                innerColor:'rgba(255,0,0,1)',
                middleColor:'rgba(255,0,0,0.7)',
                outerColor:'rgba(255,0,0,0.5)',
                strokeStyle:'orange'
            },
        ];

        var numDiscs = discs.length;
        var animateButton = document.getElementById('animateButton');
        var lastTime = 0;

        //初始化
        context.font = '48px Helvetica';
        drawBackground();
        //事件控制
        animateButton.onclick = function(){
            paused = paused? false:true; 
            if(paused){  //如果停止动画
                animateButton.value = 'Animate';
            }else{ //播放动画
                window.requestAnimationFrame(animate);
                animateButton.value = 'Pause';
            }
        }

        //执行每次动画效果
        function animate(time){
            if(!paused){
                context.clearRect(0,0,canvas.width,canvas.height);//每帧清空一次画布
                drawBackground();
                update(); //更新此帧的三个圆的各种新属性
                drawCircles();//开始绘制更新后的圆

                //绘制帧速率
                context.fillStyle = 'cornflowerblue';
                context.fillText(calculateFps().toFixed()+'fps',20,60);
                //执行下一次animate
                window.requestAnimationFrame(animate);
            }
        }
        //绘制帧速率
        function calculateFps(){
             //这里会有一个加号是因为一元+操作符会有Number()转型函数的功能，将时间对象转换到数字类型的秒数，以便后续计算
            var now = +(new Date);
            //console.log(new Date);
            //console.log(now);
            var fps = 1000/(now - lastTime);

            lastTime = now;

            return fps;
        }
        //更新
        function update(){
            var disc;
            for(var i=0;i<numDiscs;i++){
                disc = discs[i];

                if(disc.x+disc.radius+disc.velocityX>context.canvas.width || disc.x-disc.radius+disc.velocityX<0){
                    disc.velocityX = -disc.velocityX;
                }
                if(disc.y+disc.radius+disc.velocityY>context.canvas.height || disc.y-disc.radius+disc.velocityY<0){
                    disc.velocityY = -disc.velocityY;
                }
                disc.x += disc.velocityX;
                disc.y += disc.velocityY;

            }
        }
        //绘制更新后的圆
        function drawCircles(){
            var disc;
            var gradient;
            for(var i=0;i<numDiscs;i++){
                disc = discs[i];

                gradient = context.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);

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

            }
        }
        //绘制横隔背景
        function drawBackground(){
            context.save();
            context.shadowColor = undefined;
            context.shadowOffsetX = 0;
            context.shadowOffsetY = 0;
            context.shadowBlur = 0;

            var step_y = 12;
            var left_margin = step_y*4;
            var top_margin = step_y*3;
            var i = canvas.height;

            context.strokeStyle = 'lightgray';
            context.lineWidth = 0.5;

            while(i>top_margin){
                context.beginPath();
                context.moveTo(0,i);
                context.lineTo(canvas.width,i);
                context.stroke();
                i-=step_y;
            }

            context.restore();
        }
    </script>
</html>