重复纹理以使用 clip() 循环

Question

我有一个纹理，我在裁剪平面上使用 drawImage()。但是我有一个问题，一旦它移动超过纹理的宽度，我无法弄清楚如何环绕它，所以它会无限期地循环，它也因为某种原因不会剪裁。

我的绘制代码如下所示：

var radius = 120;
var pos = {'x':canvas.width/2,'y':canvas.height/2};
var x = 0;
var offsetX = 0;

function draw() {
    ctx.clearRect(0,0,canvas.width,canvas.height);

    x += 1.1415;  

    ctx.beginPath();
    ctx.arc(pos.x, pos.y, radius, 0, Math.PI * 2, false);
    ctx.closePath();

    ctx.clip();

var scale = (radius * 2) / img.height;

    ctx.drawImage(img, pos.x+x, pos.y, img.width, img.height, pos.x - radius - offsetX * scale, pos.y - radius, img.width * scale, img.height * scale);
    ctx.restore();    

requestAnimationFrame(draw);
}

我在这里创建了演示，这样你就可以看到当纹理移动得太远时会发生什么，它基本上消失了，我需要它再次循环而没有间隙，所以它是无缝的：http://jsfiddle.net/dv2r8zpv/

绘制纹理位置的最佳方法是什么，以便它环绕，我不太明白该怎么做。

Answer 1

我现在已经创建了一个无缝循环。我更改的代码如下。更改 drawImage 上的 y 封装整个圆

if (x > img.width) {
    x = 0;
}

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

ctx.drawImage(img, -img.width+x,0, ...);

Updated answer with full circle

重复纹理以使用 clip() 循环

Repeat texture to loop around with clip()

javascript

math

animation

2d