Rough.js עושה יד- Drawn גרפיקה עם בד & SVG

זה מדהים לראות עד כמה האינטרנט הגיע עם אלמנטים דינמיים כמו ב- SVG של הדפדפן. אתה יכול לעצב הכל אנימציות מותאמות אישית ל משחקי HTML5 עם הספריות הנכונות.

אחת הספריות החדשות ביותר שווה בדיקה Rough.js. זה גרפיקה חינם הדור סקריפט - - כרגע בשלב זה עובד על בד ואלמנטים SVG.

אתה יכול לבנות סמלים מותאמים אישית, גרפים בר, כמעט כל דבר שאתה רוצה כל בקוד. וגם, את התוצאה הסופית לובשת תחושה נפלאה, מצוירת ביד.

נכון לכתיבה זו, Rough.js עדיין veta.1 בטא, אז זה לא יכול להיות מוכן עבור אתר הייצור חי. אבל זו הוכחה לכך תקני אינטרנט מתקדמים במהירות ואנחנו נכנסים לגיל שבו דברים כאלה אפשריים.

קח לדוגמה את זה סרגל התקדמות שנוצר באמצעות Rough.js. אם תלחץ על “התחל” כפתור שתבחין בו פועל אנימציה מותאמת אישית כי באמת נראה מצויר ביד. זה משתמש קווי SVG עם דפוסי מוגדרים מראש כדי ליצור אפקט מתנדנד שנראה טבעי באמת.

בדף GitHub הראשי, תמצא רשימה של מקטע דוגמאות רבות של Rough.js בפעולה.

כל אלו לבוא עם דוגמאות קוד ואת צריכה להיות די קל לעבד מחדש עבור כל אתר אינטרנט. כל מה שאתה צריך הוא קובץ Rough.js סקריפט וכמה סבלנות להתעסק עם JavaScript.

הנה קטע טקסט להפגין כיצד ליצור מלבן בקודYou

 var raw = New RoughCanvas (document.getElementById ('myCanvas'), 400, 200); (10, 10, 200, 200); / x, y, רוחב, גובה 

די פשוט ברגע שאתה מבין את הקוד אבל כנראה לא את התסריט האינטואיטיבי ביותר למתחילים.

אם אתה רוצה קטעי קוד נוספים הדגמות לדוגמה לבדוק את הבית Rough.js. זה המקום המושלם להתחיל ללמוד ולמצוא קטעי קוד אתה יכול לעבד מחדש.

כמו כן, אם יש לך שאלות או הצעות עבור תכונות נוספות אתה יכול הודעה היוצר Rough.js בטוויטר @preetster.