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

 1 var c = document.getElementById(‘c‘),    //canvas
 2         ctx = canvas.getContext(‘2d‘),
 3         img = new Image(),
 4         offset = 0,
 5         fps = 60,
 6         speed = 80 / fps; //每帧的速度
 7 
 8     img.src = "test.jpg";
 9 
10     function draw(ctx) {
11         ctx.save();
12         //offset < c.width ? (offset + speed) : 0
13         //后者不能简单重置为0，由于速度过快offset可能超过canvas的大小
14         //故需要计算两者的差值
15         offset = offset < c.width ? (offset + speed) : (offset - c.width);
16         //通过translate来实现图片的滚动
17         ctx.translate(-offset, 0);
18 
19         //只需将图片正常地绘制在画面上即可，不需要操作其位置
20         ctx.drawImage(img, 0, 0);
21         ctx.drawImage(img,img.width,0);
22         ctx.restore();
23     }
24     window.onload = function() {
25         (function() {
26             ctx.clearRect(0, 0, c.width, c.height);
27             draw(ctx);
28             requestAnimationFrame(arguments.callee,c);
29         })();
30     };