मैं चाहता हूं कि यह शब्द एक एनीमेशन के साथ खींचा जाए, जैसे कि पृष्ठ "शब्द" उसी तरह से लिखता है जो हम करेंगे
कैनवास संस्करण
यह एकल वर्णों को अधिक आकर्षित करेगा जैसे एक हाथ से लिखेगा। यह एक लंबे डैश-पैटर्न का उपयोग करता है जहां समय / समय पर प्रति चार्ट पर स्वैप किया जाता है। इसका एक गति पैरामीटर भी है।
उदाहरण एनीमेशन (नीचे डेमो देखें)
यथार्थवाद और जैविक महसूस को बढ़ाने के लिए, मैंने यादृच्छिक पत्र-रिक्ति, एक वाई डेल्टा ऑफसेट, पारदर्शिता, एक बहुत ही सूक्ष्म घुमाव और अंत में पहले से ही "हस्तलिखित" फ़ॉन्ट का उपयोग करके जोड़ा। इन्हें "लेखन शैलियों" की एक विस्तृत श्रृंखला प्रदान करने के लिए गतिशील मापदंडों के रूप में लपेटा जा सकता है।
और भी अधिक यथार्थवादी देखो के लिए पथ डेटा की आवश्यकता होगी जो यह डिफ़ॉल्ट रूप से नहीं है। लेकिन यह कोड का एक छोटा और कुशल टुकड़ा है, जो हाथ से लिखे गए व्यवहार का अनुमान लगाता है, और इसे लागू करना आसान है।
यह काम किस प्रकार करता है
डैश पैटर्न को परिभाषित करके हम मार्चिंग चींटियों, बिंदीदार रेखाओं और इसके आगे का निर्माण कर सकते हैं। "ऑफ" डॉट के लिए एक बहुत लंबी डॉट को परिभाषित करके और धीरे-धीरे "ऑन" डॉट को बढ़ाकर इसका लाभ उठाते हुए, यह डॉट की लंबाई को एनिमेट करते समय रेखा को खींचने पर भ्रम की स्थिति देगा।
चूंकि ऑफ डॉट इतना लंबा है कि रिपीटिंग पैटर्न दिखाई नहीं देगा (टाइपफेस की लंबाई और विशेषताओं के साथ अलग-अलग होगा)। पत्र के पथ की लंबाई होगी इसलिए हमें यह सुनिश्चित करने की आवश्यकता है कि हम प्रत्येक डॉट को कम से कम इस लंबाई को कवर कर रहे हैं।
ऐसे अक्षरों के लिए जिनमें एक से अधिक पथ होते हैं (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>