Canvas выпадающий текст анимации - PullRequest
Новая
       15

Canvas выпадающий текст анимации

0 голосов
/ 30 мая 2018

Следующий код анимирует данный текст сверху вниз (fiddle: 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);

1 Ответ

0 голосов
/ 30 мая 2018

Вы можете использовать% (Modulo) для изменения положения текстов.

этот оператор вычисляет остаток, разделенный на следующее число.(извините за плохой английский)

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

Так что в конечном итоге я имею в виду Y% (ScreenWidth) дать вам ответ.

...