為什么我的背景不向右移動？

Question

<canvas id="caneva" width="800" height="600"></canvas>
  <script>
    var canvas1 = document.querySelector("#caneva");
    var ctx  = canvas1.getContext("2d");
    var img = new Image();

        img.src = 'img/lvl1.jpg';
        var pattern = null;
        var posx = null;
        img.onload = function() {
          pattern = ctx.createPattern(img, 'repeat');
          ctx.fillStyle = pattern;
          ctx.fillRect(0, 0, 800, 600);
          posx = 0;
            function animate() {
                posx += 1;
                ctx.fillStyle = pattern;
                ctx.fillRect(posx, 0, 800, 600);
            }
            setInterval(animate, 10)
        };


      </script>

我想讓背景圖像向右移動。 這沒用。 我嘗試了所有但我沒有成功地做到這一點。

Answer 1

圖案具有固定變換，不隨矩形移動。

您可以使用模式的setTransform function 或使用 canvas 變換。

將 function 更改為

ctx.fillStyle = pattern;
function animate() {
   ctx.setTransform(1, 0, 0, 1, posx++, 0);  // last two are x, y of origin
   ctx.fillRect(0, 0, 800, 600);  // draw at origin
}

將移動模式。