横向卷轴(side-scrolling)地图的canvas实现

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

#mainContent{width:1200px}
#sideBar{display:none}

标题有点小题大作了，实际上是实现一张看起来连续的运动背景图片。效果如下：

实现原理：

图片1与图片2是两张首尾衔接的图片，图片1以一定速度移出canvas，图片2慢慢移进canvas，当图片1完全移出canvas范围后，立即将图片1位置重置，由于两张图片是首尾衔接的，所以看起来就像是一张无限滚动的地图。

关键代码：

 var c = document.getElementById('c'),    //canvas

         ctx = canvas.getContext('2d'),

         img = new Image(),

         offset = 0,

         fps = 60,

         speed = 80 / fps; //每帧的速度

     img.src = "test.jpg";

     function draw(ctx) {

         ctx.save();

         //offset < c.width ? (offset + speed) : 0

         //后者不能简单重置为0，由于速度过快offset可能超过canvas的大小

         //故需要计算两者的差值

         offset = offset < c.width ? (offset + speed) : (offset - c.width);

         //通过translate来实现图片的滚动

         ctx.translate(-offset, 0);

         //只需将图片正常地绘制在画面上即可，不需要操作其位置

         ctx.drawImage(img, 0, 0);

         ctx.drawImage(img,img.width,0);

         ctx.restore();

     }

     window.onload = function() {

         (function() {

             ctx.clearRect(0, 0, c.width, c.height);

             draw(ctx);

             requestAnimationFrame(arguments.callee,c);

         })();

     };