canvas之图片无缝滚动

原理及分析：

• 这个案例的重点就在于如何弥补图片移动之后的空白部分，这里需要用到canvas之图片绘制的相关知识，主要需要用到：ctx.drawImage(img对象,裁切x，裁切y，裁切w，裁切h,绘制x，绘制y，绘制w，绘制h)
• 也就是你差多少，我就裁剪多少给你补上
• 要注意的是这个案例只涉及到了图片在x轴方向上的移动，跟y轴没有关系

 canvas {
            border: 1px solid
        }

 <canvas width="288" height="512">您的浏览器不支持canvas标签</canvas>

 <script>
        var mycanvas = document.querySelector('canvas');
        var ctx = mycanvas.getContext('2d');

        //准备图片对象
        var obj = {
            'bg_day': 'img/bg_day.png',
            'land': 'img/land.png'
        };

        //实现预加载
        var flag = 0;
        var alreadyObj = {};
        for (var i in obj) {
            //创建图片对象
            var img = new Image();
            img.src = obj[i];

            //将图片存入对象里
            alreadyObj[i] = img;

            //加载图片
            img.onload = function() {
                flag++;

                //当图片加载完毕后
                if (flag == Object.keys(obj).length) {
                    callback(alreadyObj);
                }
            }
        }

        function callback(alreadyObj) {
            //初始坐标
            var x = 0;

            //实现无缝滚动
            var timer = setInterval(function() {
                //清除
                ctx.clearRect(0, 0, mycanvas.width, mycanvas.height);

                //循环运动
                x--;
                if (x <= -288) {
                    x = 0;
                }

                // 绘制图片
                ctx.drawImage(alreadyObj['bg_day'], x, 0);

                // ctx.drawImage(img对象,裁切x，裁切y，裁切w，裁切h,绘制x，绘制y，绘制w，绘制h)

                //补全天空空白
                ctx.drawImage(alreadyObj['bg_day'], 0, 0, -x, 512, 288 + x, 0, -x, 512);

                // 绘制图片
                ctx.drawImage(alreadyObj['land'], x, 400);

                //补全陆地空白
                ctx.drawImage(alreadyObj['land'], 0, 0, -x, 512, 288 + x, 400, -x, 512);
            }, 60)
        }
    </script>