HTML5 כולל אלמנט מרגש שנקרא CANVAS. יש לו הרבה שימושים, אך כדי להשתמש בו, עליך ללמוד קצת JavaScript, HTML, ולפעמים CSS.
זה הופך את אלמנט ה- CANVAS למרתיע מעט עבור מעצבים רבים, ולמעשה, רובם ככל הנראה יתעלמו את האלמנט עד שיש כלים אמינים ליצור אנימציות ומשחקי CANVAS מבלי לדעת JavaScript.
לשם מה משמש HTML5 בד
ניתן להשתמש באלמנט HTML5 CANVAS להרבה דברים שבעבר היית צריך להשתמש ביישום מוטבע כמו Flash כדי ליצור:
- גרפיקה דינמית
- משחקים מקוונים ולא מקוונים
- אנימציות
- וידאו ואודיו אינטראקטיביים
למעשה, הסיבה העיקרית שאנשים משתמשים באלמנט CANVAS היא בגלל קל להפוך דף אינטרנט רגיל ליישום אינטרנט דינמי ואז להמיר יישום זה לאפליקציה סלולרית לשימוש בסמארטפונים וב - טבליות.
אם יש לנו פלאש, למה אנחנו צריכים בד?
על פי מפרט HTML5, אלמנט CANVAS הוא: "... בד מפת סיביות תלוי ברזולוציה, אשר יכול לשמש להצגת גרפים, גרפיקה של משחקים, אמנות או תמונות חזותיות אחרות בזמן אמת."
אלמנט ה- CANVAS מאפשר לך לצייר גרפים, גרפיקה, משחקים, אמנות ודמויות אחרות ישירות בדף האינטרנט בזמן אמת.
אולי אתה חושב שאנחנו יכולים כבר לעשות זאת עם פלאש, אך ישנם שני הבדלים גדולים בין CANVAS לפלאש:
- אלמנט ה- CANVAS מוטבע ישירות ב- HTML. הסקריפטים הנמשכים אליו נמצאים ב- HTML או בקובץ חיצוני מקושר. משמעות הדבר היא שאלמנט CANVAS הוא חלק ממודל אובייקט המסמך (DOM).
- פלאש הוא קובץ חיצוני מוטבע. הוא משתמש באלמבט EMBED או OBJECT להצגה, ואינו יכול לתקשר ישירות עם רכיבי ה- HTML האחרים. מכיוון שאלמנט ה- CANVAS הוא חלק מה- DOM, הוא יכול לקיים אינטראקציה עם ה- DOM בדרכים רבות.
- לדוגמה, אתה יכול ליצור אנימציה שמשתנה כאשר מתקיים אינטראקציה עם חלק אחר של הדף - כמו למשל רכיב טופס שמולא. עם פלאש, הכי הרבה שאתה יכול לעשות יהיה להתחיל את סרט פלאש או אנימציה, אך באמצעות CANVAS, תוכל ליצור אפקטים רבים ושונים, אפילו להוסיף את הטקסט משדה הטופס לאנימציה.
- אלמנט CANVAS נתמך באופן מקורי על ידי דפדפני אינטרנט. על מנת שמשתמשים יוכלו להשתמש בפלאש בפועל, על הדפדפן שלהם להתקין את התוסף. לרוב זו טרחה עבור רוב האנשים עקב התקנות פלאש מיושנות או העובדה שמערכת ההפעלה שלהם פשוט אינה תומכת בכך.
- בעבר היה מותקן בכל דפדפן התוסף, אך זה כבר לא המקרה, ורבים אף מסירים את התוסף בגלל קשיים. בנוסף, זה אפילו לא זמין בפופולרי פלטפורמת iOS.
קנבס שימושי גם אם מעולם לא תכננתם להשתמש בפלאש
אחת הסיבות העיקריות לכך שאלמנט CANVAS מבלבל כל כך היא שמעצבים רבים התרגלו לאינטרנט סטטי לחלוטין. תמונות עשויות להיות מונפשות, אבל זה נעשה עם GIFוכמובן, אתה יכול להטמיע וידאו לדפים, אך שוב, זהו סרטון סטטי שפשוט יושב על הדף ואולי מתחיל או מפסיק בגלל אינטראקציה, אבל זה הכל.
אלמנט ה- CANVAS מאפשר לך להוסיף כל כך הרבה יותר אינטראקטיביות לדפי האינטרנט שלך מכיוון שכעת אתה יכול לשלוט בגרפיקה, בתמונות ובטקסט באופן דינמי בעזרת שפת סקריפטים. אלמנט ה- CANVAS עוזר לך להפוך תמונות, תמונות, תרשימים וגרפים לאלמנטים מונפשים.
מתי לשקול שימוש באלמנט הקנבס
הקהל שלך צריך להיות השיקול הראשון שלך בעת ההחלטה אם להשתמש באלמנט CANVAS.
אם הקהל שלך משתמש בעיקר Windows XP ו- IE 6, 7 או 8, ואז יצירת תכונת קנבס דינמית תהיה חסרת טעם מכיוון שדפדפנים אלה אינם תומכים בה.
אם אתה בונה יישום שישמש רק במכונות Windows, ייתכן ש- Flash יהיה הפתרון הטוב ביותר שלך. יישום לשימוש במחשבי Windows ו- Mac עשוי להפיק תועלת מיישום Silverlight.
עם זאת, אם יש צורך להציג את היישום שלך במכשירים ניידים (אנדרואיד ו- iOS), כמו גם מודרני מחשבים שולחניים (עודכן לגרסאות הדפדפן העדכניות ביותר), ואז השימוש באלמנט CANVAS הוא בחירה טובה.
זכור כי שימוש באלמנט זה מאפשר לך לקבל אפשרויות חירום כמו תמונות סטטיות לדפדפנים ישנים שאינם תומכים בו.
עם זאת, לא מומלץ להשתמש בבד HTML5 לכל דבר. אתה צריך לעולם לא השתמש בו לדברים כמו הלוגו, הכותרת או הניווט שלך (אם כי השימוש בו כדי להנפיש חלק מכל אלה יהיה בסדר).
על פי המפרט, עליך להשתמש באלמנטים המתאימים ביותר למה שאתה מנסה לבנות. אז השימוש באלמנט HEADER יחד עם תמונות וטקסט עדיף על אלמנט CANVAS עבור הכותרת והלוגו שלך.
כמו כן, אם אתה יוצר א עמוד אינטרנט או יישום המיועד לשימוש במדיום שאינו אינטראקטיבי כמו הדפסה, עליך להיות מודע לכך שאלמנט ה- CANVAS שעודכן באופן דינמי עשוי שלא להדפיס כפי שציפית. ייתכן שתקבל הדפסה של התוכן הנוכחי או של התוכן החוזר.