How to animate cursive font

Asked

Viewed 34 times

-1

In my home of the site I’m creating, has the very large name of the person with a cursive source. I’d like to know how to open the page, start an animation as if a person is writing the name.

The name will be revealed, or completed until the end, but making the whole path of the lines.

Could someone help me?

javascript jquery html css

1 answer

0

friend, I’m just playing the content of 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>

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.