使位图环绕画布以进行无限滚动

Question

我正在寻找一种将位图图像包裹在画布周围的方法，以获得无限滚动效果。我在看 EaselJS 但干净的 javascript 代码也足够了。

现在我正在向左移动一个图像，当它达到某个标记时，它会自行重置。

来自动作脚本，有一个选项可以将位图的像素“包裹”到另一侧，从而永远不会真正替换图像，而是将像素包裹在图像内。这在带有画布的javascript中可能吗？

我目前的代码：

this.update = function() {
    // super large graphic  
    _roadContainer.x -= 9;
    if(_roadContainer.x < -291) _roadContainer.x = 0;
}

Answer 1

从一个好的风景图像开始。

使用 context.scale(-1,1) 水平翻转图像。

将翻转后的图像合并到原始图像的右侧。

因为我们已经完全镜像了图像，所以组合图像的最左侧和最右侧完全相同。

因此，当我们平移组合图像并“用完图像”时，我们只需将组合图像的另一个副本添加到右侧，我们就可以进行无限+无缝平移。

这是代码和小提琴：http : //jsfiddle.net/m1erickson/ywDp5/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    // thanks Paul Irish for this RAF fallback shim
    window.requestAnimFrame = (function(callback) {
      return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
      function(callback) {
        window.setTimeout(callback, 1000 / 60);
      };
    })();


    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var infiniteImage;
    var infiniteImageWidth;
    var img=document.createElement("img");
    img.onload=function(){

      // use a tempCanvas to create a horizontal mirror image
      // This makes the panning appear seamless when
      // transitioning to a new image on the right
      var tempCanvas=document.createElement("canvas");
      var tempCtx=tempCanvas.getContext("2d");
      tempCanvas.width=img.width*2;
      tempCanvas.height=img.height;
      tempCtx.drawImage(img,0,0);
      tempCtx.save();
      tempCtx.translate(tempCanvas.width,0);
      tempCtx.scale(-1,1);
      tempCtx.drawImage(img,0,0);
      tempCtx.restore();
      infiniteImageWidth=img.width*2;
      infiniteImage=document.createElement("img");
      infiniteImage.onload=function(){
          pan();
      }
      infiniteImage.src=tempCanvas.toDataURL();
    }
    img.crossOrigin="anonymous";
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/mountain.jpg";


    var fps = 60;
    var offsetLeft=0;
    function pan() {

        // increase the left offset
        offsetLeft+=1;
        if(offsetLeft>infiniteImageWidth){ offsetLeft=0; }

        ctx.drawImage(infiniteImage,-offsetLeft,0);
        ctx.drawImage(infiniteImage,infiniteImage.width-offsetLeft,0);

        setTimeout(function() {
            requestAnimFrame(pan);
        }, 1000 / fps);
    }

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=500 height=143></canvas><br>
</body>
</html>