Я пытаюсь сделать так, чтобы текст отображался символ за символом, как вы часто видите в играх с визуальными новеллами, но когда я запускаю код, весь текст появляется сразу.
Я пытался контролировать ta cc ( аккумулятор) и t.char (индекс символа) с console.log, и кажется, что в первый раз ta cc встречает условие в t.display (), t.char увеличивается в несколько раз в течение одного и того же вызова t .display (), пока не достигнет условия, при котором t.done = true. Или, если это не так, возможно, t.display () вызывается несколько раз за одну итерацию anim () l oop.
- Как t.char будет меняться несколько раз времена, подобные этому?
- Что я должен сделать, чтобы предотвратить это?
[Edit] - я использовал console.log для отслеживания первых нескольких значений метки времени, а именно:
- не определено
- 24,687
- 41,37
- 58,053
Значения продолжаются с относительно линейной скоростью, подобной этой , Я знал, что некоторые значения, такие как первое, могут быть неопределенными, это обрабатывается оператором if в anim (), как и предполагалось.
var cvs = document.getElementById('daCanvas');
var ctx = cvs.getContext("2d");
class Text {
constructor() {
this.x = 0;
this.y = 0;
this.acc = 0.0;
this.char = 0;
this.done = false;
this.text = "Text";
this.len = this.text.length;
}
display(dt) {
this.acc += dt;
if (this.acc > 1000 && !this.done) {
this.acc = 0;
this.char += 1;
if (this.char = this.len) {
this.done = true;
}
}
ctx.fillStyle = "#000000";
ctx.fillRect(this.x, this.y, 500, 200);
ctx.fillStyle = "#FFFFFF";
ctx.fillText(this.text.slice(0, this.char), this.x, this.y + 50);
}
}
t = new Text();
let lastTime = 0;
let dt = 0;
function anim(timestamp) {
if (timestamp) {
dt = timestamp - lastTime;
lastTime = timestamp;
}
t.display(dt);
requestAnimationFrame(anim);
}
ctx.font = "50px Arial";
anim();
* {
margin: 0;
padding: 0;
background-color: white;
color: white;
font-size: 11px;
}
#daCanvas {
display: block;
margin: auto;
}
#text-wrapper {
display: block;
text-align: center;
margin: 0 auto;
width: 300px;
}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<div id="text-wrapper">
<p>Example</p>
</div>
<canvas id="daCanvas" width="500" height="400"></canvas>
</body>
</html>