Я хочу, чтобы это слово было нарисовано с помощью анимации, чтобы страница «записывала» слово так же, как мы
Холст версия
Это будет рисовать отдельные символы больше, чем можно было бы написать вручную. Он использует длинный штрих-шаблон, в котором порядок включения / выключения меняется со временем на символ. Он также имеет параметр скорости.
Пример анимации (см. Демо ниже)
Чтобы повысить реалистичность и органичность, я добавил случайный межбуквенный интервал, смещение по оси y, прозрачность, очень тонкое вращение и, наконец, использование уже «рукописного» шрифта. Они могут быть упакованы как динамические параметры, чтобы обеспечить широкий диапазон «стилей письма».
Для еще более реалистичного вида потребовались бы данные пути, которых нет по умолчанию. Но это короткий и эффективный фрагмент кода, который приближает рукописное поведение и прост в реализации.
Как это устроено
Определяя рисунок тире, мы можем создавать марширующих муравьев, пунктирные линии и так далее. Воспользовавшись этим, определив очень длинную точку для точки «выкл» и постепенно увеличивая точку «вкл», это создаст иллюзию рисования линии при нанесении штрихов при анимации длины точки.
Поскольку точка смещения слишком длинная, повторяющийся узор не будет виден (длина будет зависеть от размера и характеристик используемого шрифта). Путь письма будет иметь длину, поэтому мы должны убедиться, что каждая точка хотя бы покрывает эту длину.
Для букв, состоящих из более чем одного пути (например, O, R, P и т. Д.), Как один для контура, один для полой части, линии будут отображаться одновременно. Мы не можем ничего с этим поделать с помощью этой техники, так как для этого потребуется доступ к каждому сегменту пути, который будет обводиться отдельно.
Совместимость
Для браузеров, которые не поддерживают элемент canvas, между тегами можно разместить альтернативный способ отображения текста, например стилизованный текст:
<canvas ...>
<div class="txtStyle">STROKE-ON CANVAS</div>
</canvas>
демонстрация
Это производит живой анимированный удар ( без зависимостей ) -
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>