Jak animować rysunek tekstu na stronie internetowej?

Chcę, aby to słowo zostało narysowane animacją, tak aby Strona "pisze" słowo w ten sam sposób, w jaki byśmy

Wersja Canvas

To będzie rysować pojedyncze znaki bardziej jak pisane ręcznie. Używa długiego wzorca myślnika, w którym kolejność włączania/wyłączania jest zamieniana w czasie na znak. Ma również parametr prędkości.

^{przykładowa animacja (zobacz demo poniżej)}

Aby zwiększyć realizm i poczucie organiczności, dodałem losowe odstępy między literami, przesunięcie delta y, przezroczystość, bardzo subtelny obrót i wreszcie użycie już "odręcznej" czcionki. Można je zapakować jako parametry dynamiczne, aby zapewnić szeroką gamę "stylów pisania".

Dla jeszcze bardziej realistycznego wyglądu wymagane są dane ścieżki, które nie są domyślnie. Ale jest to krótki i wydajny fragment kodu, który przybliża ręcznie pisane zachowanie i jest łatwy do zaimplementowania.

Jak to działa

Definiując wzorzec kreski mamy może tworzyć maszerujące mrówki, kropkowane linie i tak dalej. Korzystając z tego, definiując bardzo długą kropkę dla kropki " off "i stopniowo zwiększając kropkę "on", daje to iluzję rysowania linii podczas głaskania podczas animowania długości kropki.

Ponieważ off dot jest tak długi, powtarzający się wzór nie będzie widoczny(długość będzie się różnić w zależności od rozmiaru i właściwości użytego kroju pisma). Ścieżka listu będzie miała długość, więc musimy się upewnić, że jesteśmy każda kropka przynajmniej pokrywa tę długość.

Dla liter składających się z więcej niż jednej ścieżki (np. O, R, P itd.) jak jeden jest dla konturu, jeden jest dla pustej części, linie będą wyglądać na narysowane jednocześnie. Nie możemy wiele z tym zrobić za pomocą tej techniki, ponieważ wymagałoby to oddzielnego głaskania dostępu do każdego segmentu ścieżki.

Zgodność

Dla przeglądarek, które nie obsługują elementu canvas, alternatywny sposób wyświetlania tekstu może być umieszczony pomiędzy znaczniki, na przykład tekst stylizowany:

<canvas ...>
    <div class="txtStyle">STROKE-ON CANVAS</div>
</canvas>

Demo

To tworzy na żywo animowane stroke-on (BEZ zależności) -

var ctx = document.querySelector("canvas").getContext("2d"),
    dashLen = 220, dashOffset = dashLen, speed = 5,
    txt = "STROKE-ON CANVAS", x = 30, 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 = "#1f2f90";

(function loop() {
  ctx.clearRect(x, 0, 60, 150);
  ctx.setLineDash([dashLen - dashOffset, dashOffset - speed]); // create a long dash mask
  dashOffset -= speed;                                         // reduce dash length
  ctx.strokeText(txt[i], x, 90);                               // stroke letter

  if (dashOffset > 0) requestAnimationFrame(loop);             // animate
  else {
    ctx.fillText(txt[i], x, 90);                               // fill final letter
    dashOffset = dashLen;                                      // prep next char
    x += ctx.measureText(txt[i++]).width + ctx.lineWidth * Math.random();
    ctx.setTransform(1, 0, 0, 1, 0, 3 * Math.random());        // random y-delta
    ctx.rotate(Math.random() * 0.005);                         // random rotation
    if (i < txt.length) requestAnimationFrame(loop);
  }
})();

canvas {background:url(http://i.imgur.com/5RIXWIE.png)}

<canvas width=630></canvas>