Rough.js สร้างกราฟิกที่วาดด้วยมือด้วย Canvas & SVG

มันวิเศษมากที่ได้เห็นว่าเว็บมาไกลแค่ไหน องค์ประกอบแบบไดนามิก เช่น SVG ในเบราว์เซอร์. คุณสามารถออกแบบทุกอย่างจาก ภาพเคลื่อนไหวที่กำหนดเอง ไปยัง เกม HTML5 กับห้องสมุดที่เหมาะสม.

หนึ่งในห้องสมุดใหม่ล่าสุดที่ควรค่าแก่การทดสอบคือ Rough.js. มันคือ สคริปต์รุ่นกราฟิกฟรี ขณะนี้อยู่ในช่วงเบต้านั้น ทำงานบนองค์ประกอบ Canvas และ SVG.

คุณสามารถสร้างไอคอนที่กำหนดเองกราฟแท่งทุกอย่างที่คุณต้องการในโค้ด และผลสุดท้าย ใช้เวลากับความรู้สึกวาดด้วยมือที่งดงาม.

จากการเขียนนี้ Rough.js ยังอยู่ในรุ่น v0.1 ดังนั้น อาจไม่พร้อมสำหรับเว็บไซต์ที่ใช้งานจริง. แต่มันเป็นข้อพิสูจน์ว่า มาตรฐานเว็บกำลังก้าวหน้าอย่างรวดเร็ว และเรากำลังเข้าสู่ยุคที่สิ่งเหล่านี้เป็นไปได้.

ยกตัวอย่างเช่นนี้ แถบความคืบหน้า สร้างผ่าน Rough.js หากคุณคลิก “เริ่มต้น” ปุ่มคุณจะสังเกตเห็นมัน รันภาพเคลื่อนไหวที่กำหนดเอง ที่ ดูวาดด้วยมือจริงๆ. มันกำลังใช้ เส้น SVG ที่มีรูปแบบที่กำหนดไว้ล่วงหน้า เพื่อสร้างเอฟเฟกต์สั่นคลอนที่ดูเป็นธรรมชาติอย่างแท้จริง.

ในหน้า GitHub หลักคุณจะพบรายชื่อส่วน ตัวอย่างมากมายของการกระทำ Rough.js.

ทั้งหมดนี้ มาพร้อมกับตัวอย่างรหัส และควรจะเป็น สวยง่ายที่จะทำใหม่สำหรับเว็บไซต์ใด ๆ. สิ่งที่คุณต้องมีก็คือไฟล์สคริปต์ Rough.js และความอดทนที่จะยุ่งกับ JavaScript.

นี่คือ ตัวอย่างโค้ด สาธิตวิธีการ สร้างสี่เหลี่ยมผืนผ้าในรหัส:

 var rough = new RoughCanvas (document.getElementById ('myCanvas'), 400, 200); ขรุขระ. แก้ไข (10, 10, 200, 200); // x, y, ความกว้าง, ความสูง 

ค่อนข้างง่ายเมื่อคุณเข้าใจโค้ด แต่อาจไม่ใช่สคริปต์ที่ใช้งานง่ายที่สุดสำหรับผู้เริ่มต้น.

หากคุณต้องการตัวอย่างโค้ดเพิ่มเติมและตัวอย่างตัวอย่าง ตรวจสอบหน้าแรกของ Rough.js. มันเป็นสถานที่ที่เหมาะสำหรับการเริ่มเรียนรู้และค้นหาตัวอย่างโค้ดที่คุณสามารถทำใหม่ได้.

นอกจากนี้หากคุณมีคำถามหรือข้อเสนอแนะสำหรับคุณสมบัติเพิ่มเติมคุณสามารถส่งข้อความถึงผู้สร้าง Rough.js บน Twitter @preetster.