ฉันต้องการให้วาดคำนี้ด้วยภาพเคลื่อนไหวเช่นที่หน้า "เขียน" คำนั้นออกมาในลักษณะเดียวกับที่เราต้องการ
รุ่น Canvas
นี้จะวาดตัวอักษรเดียวมากกว่าที่คนเขียนด้วยมือ มันใช้รูปแบบเส้นประยาวที่สลับเปิด / ปิดในช่วงเวลาต่อถ่าน นอกจากนี้ยังมีพารามิเตอร์ความเร็ว
ตัวอย่างภาพเคลื่อนไหว (ดูตัวอย่างด้านล่าง)
เพื่อเพิ่มความสมจริงและความรู้สึกแบบอินทรีย์ฉันเพิ่มระยะห่างตัวอักษรแบบสุ่ม y delta offset ความโปร่งใสการหมุนที่ละเอียดมากและในที่สุดก็ใช้แบบอักษร "ลายมือ" ที่มีอยู่แล้ว สิ่งเหล่านี้สามารถสรุปเป็นพารามิเตอร์แบบไดนามิกเพื่อให้ "สไตล์การเขียน" ที่หลากหลาย
เพื่อให้ดูสมจริงยิ่งขึ้นข้อมูลเส้นทางจะต้องใช้ซึ่งไม่ใช่ค่าเริ่มต้น แต่นี่เป็นโค้ดสั้น ๆ และมีประสิทธิภาพซึ่งใกล้เคียงกับพฤติกรรมการเขียนด้วยมือและใช้งานง่าย
มันทำงานอย่างไร
โดยการกำหนดรูปแบบเส้นประเราสามารถสร้างมดเดินทัพเส้นประและอื่น ๆ การใช้ประโยชน์จากสิ่งนี้โดยการกำหนดจุดที่ยาวมากสำหรับจุด "ปิด" และค่อยๆเพิ่มจุด "เปิด" มันจะให้ภาพลวงตาของการวาดเส้นบนเมื่อลูบในขณะที่เคลื่อนไหวความยาวจุด
เนื่องจากจุดปิดยาวเกินไปรูปแบบการทำซ้ำจะไม่ปรากฏให้เห็น (ความยาวจะแตกต่างกันไปตามขนาดและลักษณะของแบบอักษรที่ใช้) เส้นทางของจดหมายจะมีความยาวดังนั้นเราต้องตรวจสอบให้แน่ใจว่าเรามีจุดแต่ละจุดอย่างน้อยครอบคลุมความยาวนี้
สำหรับตัวอักษรที่ประกอบด้วยมากกว่าหนึ่งเส้นทาง (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>