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）给你答案。

Canvas下拉文本动画

1 个答案: