Ortalanmış bir kelime olan bir web sayfası yapmak istiyorum.

İstiyorum bu kelime için çizilmiş bir animasyon, Bu sayfa "yazar" sözcüğü aynı şekilde yapardık, yani başlar bir noktada ve çizer çizgiler ve Eğriler üzerinde zaman böyle sonuçta bir karakter.

Eğer bu <canvas> ya da DOM ile yapılır umurumda değil, ve JavaScript veya CSS ile yapılan olsun umurumda değil. JQuery olmaması güzel, ancak gerekli değildir olacaktır.

Bunu nasıl yapabilirim? Aradımetraflıcahiç şansım yoktu.

Bu kelime bir animasyon, sayfa gibi çizilmesi istiyorum "biz de." sözü yazıyor

Tuval sürümü

Bu tek elle yazmak gibi tek karakter daha fazla çekecek. Sipariş kapama/char başına zaman içinde takas bir uzun çizgi-desen kullanır. Aynı zamanda hızlı bir parametresi vardır.

^{Örnek animasyon (demo bakınız aşağıda)}

Gerçekçilik ve organik hissediyorum artırmak için, harf-aralığı rastgele, y delta, şeffaflık, çok ince bir rotasyon ofset ve son olarak bir kullanma zaten "" font. el yazısı ekledim Bu, geniş bir yelpazesi sunmak için dinamik parametre olarak sarılmış olabilir "yazı stilleri".

Daha gerçekçi bir görünüm için yol verileri varsayılan olarak değil, hangi gerekli olacaktır. Ama bu elle yazılmış bir davranış yakın olan kod kısa ve etkili bir eser ve uygulamak çok kolay.

Nasıl çalışır

Çizgi deseni tanımlayarak, noktalı çizgiler ve benzeri yürüyen karıncalar yaratabiliriz. Üzerinde çalışıyorum bu tanımlama çok uzun bir nokta için "off" nokta ve giderek artması, "" nokta, bu illüzyon çizim hattı üzerinde zaman okşadı ederken animasyon nokta uzunluğu.

Nokta kapalı olduğundan yinelenen desen görünür (uzunluğu boyut ve özellikleri yazı tipi, kullanılan değişir) olmayacak kadar uzun. Mektubun yolunu her nokta en azından bu uzunluğu kapsayan yaşıyoruz emin olmalıyız kadar uzunlukta olacak.

Birden fazla yolu (f.oluşan harf için ex. O, R, P vb.) bir anahat için olduğu gibi, bir çukur bölüm, satırları aynı anda çizilmiş gibi görünüyor. Her yol kesimi için erişim ayrı ayrı okşadı gerektirir bu teknik ile ilgili bir şey yapamayız.

Uyumluluk

Tuval öğesi desteklemeyen tarayıcılar için alternatif metin etiketleri arasına yerleştirilebilir göstermek için, örneğin tarz bir metin:

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

Demo

Bu canlı animasyonlu üretir inme - (hiçbir bağımlılıkları) -

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>