Javascript рисовать текстовую анимацию

Question

Я новичок в веб-разработке. Я хочу анимировать текст на JavaScript, после определенного события. Найден пример анимации рисования линий, но метод не работает с дугами ( как анимировать рисование линий на холсте пример: http://jsfiddle.net/m1erickson/7faRQ/. Прокрутил и нашел способ (http://jsfiddle.net/loktar/uhVj6/4/), но только в количестве десятков букв. После того, как количество строк оживило, погрешность возрастает, но анимация сокращается, и я не могу найти решение для контроля этих факторов. Давайте скажем букву ' P 'будет:

var l = 10 //factor of scale

function line010(current) {
     context.beginPath();
     context.moveTo(x-5*l, y-3/2*l);
     context.lineTo(x-5*l, y-3/2*l-4*l*current);     
     context.stroke();
     curPerc++;
     if (curPerc < endPerc) {
         requestAnimationFrame(function () {
             line010(curPerc / 100)
         });
     }
 }
 function line011(current) {
     context.beginPath();
     context.moveTo(x-5*l, y-11/2*l);
     context.lineTo(x-5*l+3/2*l*current, y-11/2*l);     
     context.stroke();
     curPerc++;
     if (curPerc < endPerc) {
         requestAnimationFrame(function () {
             line011(curPerc / 100)
         });
     }
 } 
 function arc012(current) {
     context.beginPath();
     context.arc(x-7/2*l, y-9/2*l, l, -1/2*Math.PI, Math.PI*current-1/2*Math.PI);
     context.stroke();
     curPerc++;
     if (curPerc < endPerc) {
         requestAnimationFrame(function () {
             arc012(curPerc / 100)
         });
     }
 }
  function line013(current) {
     context.beginPath();
     context.moveTo(x-7/2*l, y-7/2*l);
     context.lineTo(x-7/2*l-l*current, y-7/2*l);     
     context.stroke();
     curPerc++;
     if (curPerc < endPerc) {
         requestAnimationFrame(function () {
             line013(curPerc / 100)
         });
     }
 }

Любая ошибка, чтобы указать или другой более удобный метод для создания набора единообразных алфавитов и анимации текста при вызове функции? Где я могу вставить текст и скомпилировать функцию Например,

function draw("insertText")
{
A();
B();
C();
-
-
-
!();
&();
-
-
-
}(1000);

onload.draw(Thanks for your help!);

Показывает анимацию на холсте «Спасибо за вашу помощь!»

РЕДАКТИРОВАТЬ: визуальный вывод виден на следующих рисунках (одна буква / четыре строки и дюжина букв / пятьдесят строк):

введите описание изображения здесь

введите описание изображения здесь

Answer 1

На самом деле здесь есть решение в комментариях: Как я могу анимировать рисование текста на веб-странице? дает один хороший подход. Но больше внимания уделяется созданию символов и анимации геометрии c траектория.

http://jsfiddle.net/8hwzqnrc/9/

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

<script>
var ctx = document.querySelector("canvas").getContext("2d")
    dashLen = 220, dashOffset = dashLen, speed = 10,
    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);
  }
})();
</script>