5.7_背景的滚动

最新推荐文章于 2022-10-26 08:57:34 发布

信封中的阳光

最新推荐文章于 2022-10-26 08:57:34 发布

阅读量248

点赞数

分类专栏： HTML5_CANVAS练习案例文章标签：动画技术

本文链接：https://blog.csdn.net/jun_sun_shine/article/details/72299811

版权

HTML5_CANVAS练习案例专栏收录该内容

81 篇文章 1 订阅

订阅专栏

5.7_背景的滚动

游戏背景图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>背景的滚动</title>
        <style>
            body{
                background: #ddd;
            }
            #canvas{
                position: absolute;
                top: 30px;
                left: 10px;
                background: #FFFFFF;
                cursor: crosshair;
                margin-left: 10px;
                margin-top: 10px;
                box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
                -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
                -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            }
            input{
                margin-left: 15px;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="1024" height="512"></canvas>
        <input id="animateButton" type="button" value="Animate" />
    </body>
    <script>
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var animateButton = document.getElementById('animateButton');

        var sky = new Image();

        var paused = true;
        var lastTime = 0;
        var fps = 60;
        var skyOffset = 0;
        var skyVelocity = 100; //每秒的位移速度

        //初始化
        sky.src = 'img/bg.png';

        sky.onload = function(e){
            draw();
        };
        requestAnimationFrame(animate);
        //事件
        animateButton.onclick = function (){
            paused = !paused;
            if(paused){
                animateButton.value = 'Animate';

            }else{
                animateButton.value = 'Pause';
                //不能在这里添加,应该会调用多个requestAnimationFrame事件
                //requestAnimationFrame(animate);
            }
        }

        function draw(){
            context.save();
            //以每秒恒定skyVelocity速度来移动，这是两帧的时间差*速度，就是这两帧要的位移偏量 skyVelocity/fps
            //这种就是基于时间的运动，每两帧之间的位移是动态变化的，不是恒定不变的，以免出现以帧速率决定位移量，让设备好的人跟设备一般的人，没法同时进行游戏
            skyOffset = skyOffset<canvas.width? skyOffset+skyVelocity/fps:0;
            context.translate(-skyOffset,0);

            context.drawImage(sky,0,0,canvas.width,canvas.height);
            context.drawImage(sky,canvas.width,0,canvas.width,canvas.height);

            context.restore();
        };
        function erase(){
            context.clearRect(0,0,canvas.width,canvas.height);
        }

        function calculateFps(now){
            var fps = 1000/(now - lastTime);
            //console.log(now);
            lastTime = now;

            return fps;
        }

        function animate(now){
            //注意这里的now，经过测试，now是从打开页面就开始计时的，无论动画的是执行还是静止
            //因为我们要取得的是两帧之时的时间差，所以要得到本例中采取的方法是从页面一打开就开始运行，animate
            //下一例子，尝试设计一个开关，执行动画时，才开始计时，但是每次点击重新开始动画时（非刷新），第一帧设置的lastTime是个估算值
//          if(now === undefined){
//              now = +new Date;
//          }

            //因为要取得这个fps,不能暂停这里的因为里面的lastTime要取最新最近的值
            fps = calculateFps(now);

            if(!paused){
                erase();
                draw();
            }
            requestAnimationFrame(animate);
        }
    </script>
</html>

信封中的阳光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
5.7_背景的滚动

5.7_背景的滚动<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>背景的滚动</title> <style> body{ background: #ddd; } #can
复制链接

扫一扫

专栏目录