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（）循环

1 个答案: