重複紋理循環與剪輯（）

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