In my home site of the site I'm creating, it has the very large name of the person with a cursive font . I would like to know how to start the page , start an animation as if a person were typing the name.
The name will be revealed, or completed to the end, but doing all the routing of the lines.
Could anyone help me?
My friend, I'm just playing content from the following site.:
How to Make a "Write-On" Effect using HTML5 Canvas & JavaScript
var ctx = document.querySelector("canvas").getContext("2d");
var dashLen = 220;
var dashOffset = dashLen;
var speed = 5;
var txt = "Toby Mosque";
var x = 30;
var i = 0;
ctx.font = "50px Comic Sans MS, cursive, TSCu_Comic, sans-serif";
ctx.lineWidth = 5;
ctx.lineJoin = "round";
ctx.globalAlpha = 2/3;
ctx.strokeStyle = ctx.fillStyle = "#000";
(function loop() {
ctx.clearRect(x, 0, 60, 150);
ctx.setLineDash([dashLen - dashOffset, dashOffset - speed]);
dashOffset -= speed;
ctx.strokeText(txt[i], x, 90);
if (dashOffset > 0) {
requestAnimationFrame(loop);
} else {
ctx.fillText(txt[i], x, 90);
dashOffset = dashLen;
x += ctx.measureText(txt[i++]).width + ctx.lineWidth * Math.random();
ctx.setTransform(1, 0, 0, 1, 0, 3 * Math.random());
ctx.rotate(Math.random() * 0.005);
if (i < txt.length)
requestAnimationFrame(loop);
}
})();<canvas width=640 height=100></canvas>