重复纹理循环与剪辑（）

我有一个纹理，我在剪切平面上使用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/

什么是最好的方式来绘制纹理的位置，所以它会环绕，我不太明白如何做到这一点。

来源

2015-11-06 Sir

小提琴链路断开时 –

@固定尽管Kelv.Gonzales由于某种原因，你必须点击运行它启动。 – Sir

我已经创建了一个无缝循环。我改变的代码如下。在改变的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

来源

2015-11-06 02:19:21

这不是假设突然跳跃并重新开始，这意味着无缝重复，所以你会看到最后一个字母后的第一个字母。所以在某些时候，你会看到相同的图像两次。 – Sir

我现在修改了它。 –

谢谢:)只是好奇，如果你可能知道为什么剪辑似乎不填满整个圈子？ – Sir

重复纹理循环与剪辑（）

回答

相关问题