Je veux que ce mot soit dessiné avec une animation, de telle sorte que la page "écrit" le mot de la même manière que nous le ferions
Version toile
Cela va dessiner des caractères uniques plus comme on écrirait à la main. Il utilise un long tableau de bord où l'ordre d'activation / désactivation est permuté dans le temps par caractère. Il a également un paramètre de vitesse.
Exemple d'animation (voir démo ci-dessous)
Pour augmenter le réalisme et la sensation organique, j'ai ajouté un espacement aléatoire des lettres, un décalage y delta, de la transparence, une rotation très subtile et enfin une police déjà "manuscrite". Celles-ci peuvent être regroupées sous forme de paramètres dynamiques pour fournir une large gamme de "styles d'écriture".
Pour un aspect encore plus réaliste, les données de chemin seraient nécessaires, ce qui n'est pas le cas par défaut. Mais il s'agit d'un morceau de code court et efficace qui se rapproche du comportement manuscrit et facile à implémenter.
Comment ça fonctionne
En définissant un motif de tiret, nous pouvons créer des fourmis en marche, des lignes pointillées, etc. Profitant de cela en définissant un point très long pour le point "off" et en augmentant progressivement le point "on", cela donnera l'illusion de dessiner la ligne quand elle sera caressée tout en animant la longueur du point.
Étant donné que le point désactivé est si long, le motif répétitif ne sera pas visible (la longueur variera en fonction de la taille et des caractéristiques de la police de caractères utilisée). Le chemin de la lettre aura une longueur, nous devons donc nous assurer que chaque point couvre au moins cette longueur.
Pour les lettres qui se composent de plus d'un chemin (par exemple O, R, P, etc.) comme pour le contour, pour la partie creuse, les lignes semblent tracées simultanément. Nous ne pouvons pas faire grand-chose avec cette technique car elle nécessiterait que l'accès à chaque segment de chemin soit tracé séparément.
Compatibilité
Pour les navigateurs qui ne prennent pas en charge l'élément canvas, une autre façon d'afficher le texte peut être placée entre les balises, par exemple un texte stylisé:
<canvas ...>
<div class="txtStyle">STROKE-ON CANVAS</div>
</canvas>
Démo
Cela produit le passage en direct animé ( pas de dépendances ) -
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>