1

我正在尝试绘制一个“无限”图，这个想法是我将通过将画布向左移动一个像素来重新绘制画布，然后清除最右边的列，将一个像素绘制到一个已清除的列中。但是有些东西不起作用，我无法理解是什么。下面的示例代码：

var telemetryScreen, telemetryTimer;

function displayUI() {
    if (!telemetryScreen) {
        telemetryScreen = document.createElement("div");
        telemetryScreen.className = "telemetry-screen";
        document.body.appendChild(telemetryScreen);
    }
    return telemetryScreen;
}

var plotFps = function(canvas) {
    canvas.className = "telemetry-fps";
    canvas.width = 320;
    canvas.height = 240;
    canvas.getContext("2d").fillStyle = "red";
    if (!telemetryScreen) displayUI().appendChild(canvas);
    return function (delta) {
        var context = canvas.getContext("2d");
        context.drawImage(canvas, 1, 0, 319, 240, 0, 0, 319, 240);
        context.clearRect(319, 0, 1, 240);
        context.fillRect(319, 120 + delta, 1, 1);
    };
}(document.createElement("canvas"));

function startSampling() {
    var now, delta, last, start = new Date().getTime(),
    seconsPerFrame = 16;
    if (telemetryTimer) clearInterval(telemetryTimer);
    telemetryTimer = setInterval(
        function () {
            last = now;
            now = new Date().getTime();
            delta = now - last - seconsPerFrame;
            plotFps(delta);
        }, seconsPerFrame);
    // We don't anticipate framerates
    // higher then 60 fps
}

startSampling();

我也尝试过translate()，但是在画布滚动超过其宽度之一后它停止工作：/

4

1 回答 1

1

要创建无限平移效果：

  • 每一帧，将图像（或图形）绘制到前一帧左侧几个像素处
  • 在右侧的“空”像素中绘制图像（或图形）的副本

这是图像的基本代码（您可以改为绘制图形）：

    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);
    }

这是代码（由于愚蠢的 CORS 安全性，您需要提供自己的图像）：

您可以忽略用于在山景图像上创建无缝过渡的“镜像”效果。

<!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.src="YourLandscapeImage.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>
于 2013-06-20T18:18:49.417 回答