Katy93,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.text {
background-color: #eee;
border: 1px solid #ccc;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
class letter {
constructor(text, x, y) {
this.text = text;
this.x = x;
this.y = y;
}
}
class canvasTextMove extends letter {
constructor(...args) {
super(...args);
this.canvas = canvas;
this.context = this.canvas.getContext("2d");
this.rip = 12;
this.width = this.canvas.width - this.rip * 2;
this.height = this.canvas.height - this.rip * 2;
this.letter = [...this.text].map((txt, i) => new letter(txt, ...this.position()));
this.letter.forEach(this.draw.bind(this))
this.canvas.addEventListener("click", function() {
this.beginTime = performance.now();
requestAnimationFrame(this.loop.bind(this));
}.bind(this), {
once: true
})
}
rnd(num) {
return Math.trunc(Math.random() * num)
}
position() {
return [this.rnd(this.width), this.rnd(this.height)]
}
draw({ text, x, y }) {
this.context.font = "22px monospace";
this.context.fillText(text, x, y);
}
loop(time) {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
if (time - this.beginTime < 1600) {
this.letter.forEach((letter, i) => {
letter.x += (this.x + (i * this.rip) - letter.x) * .05;
letter.y += (this.y - letter.y) * .05;
this.draw(letter);
})
requestAnimationFrame(this.loop.bind(this))
} else this.draw(this);
}
}
let canvas = document.querySelector(".text");
new canvasTextMove("Тестовый пример!", 230, 120, canvas)
});
</script>
</head>
<body>
<canvas class="text" width="670" height="500" style=""></canvas>
</body>
</html>