이 단어를 애니메이션으로 그려서 페이지가 우리가하는 것과 같은 방식으로 단어를 "쓰기"하려고합니다
캔버스 버전
이것은 하나의 문자를 손으로 쓰는 것과 비슷하게 그릴 것입니다. 문자마다 시간에 따라 켜기 / 끄기 순서가 바뀌는 긴 대시 패턴을 사용합니다. 속도 파라미터도 있습니다.
애니메이션 예 (아래 데모 참조)
사실감과 자연스러운 느낌을 높이기 위해 임의의 문자 간격, y 델타 오프셋, 투명도, 매우 미묘한 회전을 추가하고 이미 "필기"글꼴을 사용했습니다. 이들은 광범위한 "쓰기 스타일"을 제공하기 위해 동적 매개 변수로 래핑 될 수 있습니다.
더욱 사실적으로 보이려면 기본적으로 필요하지 않은 경로 데이터가 필요합니다. 그러나 이것은 손으로 작성한 동작과 비슷하고 구현하기 쉬운 짧고 효율적인 코드입니다.
작동 원리
대시 패턴을 정의함으로써 행진하는 개미, 점선 등을 만들 수 있습니다. "off"도트에 대해 매우 긴 도트를 정의하고 점진적으로 "on"도트를 증가시켜이를 활용하면 도트 길이에 애니메이션을 적용하는 동안 획을 칠 때 선을 그리는 것처럼 보입니다.
오프 도트가 너무 길기 때문에 반복 패턴이 보이지 않습니다 (사용되는 서체의 크기와 특성에 따라 길이가 다름). 문자의 경로는 길이를 가지므로 적어도이 길이를 덮는 각 점이 있는지 확인해야합니다.
외곽선과 같이 하나 이상의 경로 (f.ex. O, R, P 등)로 구성된 문자의 경우 중공 부분에 대한 선이 동시에 그려지는 것처럼 보입니다. 이 방법을 사용하면 각 경로 세그먼트에 대한 액세스가 개별적으로 스트로크되어야하므로이 작업에 대해 많은 것을 할 수 없습니다.
적합성
캔버스 요소를 지원하지 않는 브라우저의 경우 텍스트를 표시하는 다른 방법 (예 : 스타일이 지정된 텍스트)을 태그 사이에 배치 할 수 있습니다.
<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>