Quiero que esta palabra se dibuje con una animación, de modo que la página "escriba" la palabra de la misma manera que lo haríamos
Versión de lona
Esto dibujará caracteres individuales más como uno escribiría a mano. Utiliza un patrón de guión largo donde el orden de encendido / apagado se intercambia con el tiempo por char. También tiene un parámetro de velocidad.
Ejemplo de animación (ver demo a continuación)
Para aumentar el realismo y la sensación orgánica, agregué un espaciado aleatorio de letras, un desplazamiento y delta, transparencia, una rotación muy sutil y finalmente uso una fuente ya "escrita a mano". Estos pueden envolverse como parámetros dinámicos para proporcionar una amplia gama de "estilos de escritura".
Para una apariencia aún más realista, se requerirían los datos de ruta que no son por defecto. Pero este es un código corto y eficiente que se aproxima al comportamiento escrito a mano y fácil de implementar.
Cómo funciona
Al definir un patrón de guión, podemos crear hormigas marchantes, líneas punteadas, etc. Aprovechando esto definiendo un punto muy largo para el punto "apagado" y aumentando gradualmente el punto "encendido", dará la ilusión de dibujar la línea cuando se acaricia mientras se anima la longitud del punto.
Dado que el punto de desconexión es tan largo, el patrón repetitivo no será visible (la longitud variará con el tamaño y las características del tipo de letra utilizado). La ruta de la letra tendrá una longitud, por lo que debemos asegurarnos de que cada punto cubra al menos esta longitud.
Para las letras que consisten en más de una ruta (por ejemplo, O, R, P, etc.) como una es para el contorno, una es para la parte hueca, las líneas aparecerán dibujadas simultáneamente. No podemos hacer mucho al respecto con esta técnica, ya que requeriría el acceso a cada segmento de ruta para ser trazado por separado.
Compatibilidad
Para los navegadores que no admiten el elemento de lienzo, se puede colocar una forma alternativa de mostrar el texto entre las etiquetas, por ejemplo, un texto con estilo:
<canvas ...>
<div class="txtStyle">STROKE-ON CANVAS</div>
</canvas>
Manifestación
Esto produce el trazo animado en vivo ( sin dependencias ):
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>