画布下拉文本动画

Question

以下代码从上到下将给定的文本动画化（小提琴： https : //jsfiddle.net/8ht5oaep/ ）

我希望它无限运行（当文本在底部消失时-重新出现在顶部）

如何处理呢？

有没有比不断绘制和清除文本更简单的方法？

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;

// fills canvas with given text
function draw(txt, y) {
    var txtHeight = 10;
    var w = Math.ceil(ctx.measureText(txt).width);
    var txt = new Array(w * 2).join(' ' + txt + ' ');

    var total_text_height = 0;
    for (var i = 0; i < Math.ceil(canvas.height / txtHeight); i++) {
        total_text_height += txtHeight;
        ctx.fillText(txt, 0, i * txtHeight + y);
    }
}

// animate
var y = 0;
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    draw('STACK-OVERFLOW', y);
    y += 1;
}
setInterval(animate, 50);

Answer 1

您可以使用％（Modulo）重新定位文本。

该运算符计算除以以下数字的余数。 （对不起，英语不好）

10％3 // 1 4％2 // 0 56％6 // 2

所以最终我的意思是Y％（ScreenWidth）给您答案。