אלמנט ה Canvas אולי אחד האלמנטים המעניינים ביותר כיום בתחום האינטרנט, פותח בשנת 2004 על ידי חברת Apple אך בסופו של דבר התווסף כתוסף של HTML5 על ידי הקונסורציום הבין לאומי לחקיקת תקנים באינטרנט (או ה W3C), ובכך נהפך לאחד התוספים המשמעותיים של התקן הHTML5.
בניית אתרים באמצעות אלמנט Canvas
עד לפני כמה שנים היינו עדים לאתרי אינטרנט בנאליים למדי ונדיר היה למצוא אתר אשר גם יספק את המידע או השרות שאנו מחפשים וגם יגרום לנו להנות בשהייה באתר, עם התפתחות הטכנולוגיה ראינו יותר ויותר שפות, טכנולוגיות וכלים בתחום בניית אתרים באינטרנט ועיצוב כמו פוטשופ, JavaScript, J Query, פלאש, HTML5 ועוד.
התקן HTML5 אשר נכנס לאחרונה הציג בפנינו מספר אלמנטים חדשים אשר הקלו רבות על עבודתו של המתכנת, בין הפיצ'רים החדשים היה את אלמנט ה Canvas, אשר באמצעותו ניתן ליצור גרפיקה של ממש ללא כל צורך בתוכנות חיצוניות ורכישת רשיונות.
אלמנט ה Canvas מאפשר בניית אתרי אינטרנט אינטראקטיביים ומודרניים.
אלמנט ה Canvas הינו אלמנט טיפה מסובך יותר מאשר האלמנטים הרגילים בHTML5 אשר הינכם רגילים לעבוד איתם ודורש טיפה יותר מיומנות והתמקצעות מאשר ידע בסטיילינג ותגיות.
אלמנט הCanvas מאפשר יצירת גרפיקות, אנימציות ומשחקים על ידי קוד JavaScript ורנדור גרפיקה ווידאו באמצעות HTML5, כמו כן האלמנט כולל ערכי רוחב וגובה בדומה לאלמנט ה <img>.
כיצד עובדים עם Canvas
כפי שציינו קודם אלמנט ה Canvas הינו בעל ערכי רוחב וגובה על מנת לספק עבורו את המידות המתאימות, לאחר מכן ניתן להשתמש באמצעות CSS על מנת לגרום ל Canvas להיות גלוי ואף לשנות את הרוטציה שלו ומיקומו באמצעות אופציית טרנזישן ב CSS3 (אפקט במעבר עכבר).
כמו כן, כמו כל אלמנט HTML5 ניתן לעשות לו מיפוי, צבע רקע, גבולות ועוד, ניתן לחבר אל האלמנט הגדרות CSS, הצללות והגדרות ריחוף.
כדי לעבוד עם אלמנט ה Canvas יש צורך לזהות אותו באמצעות DOM ראשי תיבות של (Document Object Module), ברגע שה Canvas מזוהה, מתבצע שימוש בשיטת “getContext” בקוד JavaScript אשר מאפשר גישה ל API בצייר ה Canvas.
כחלק מפיצ'ר חדש אשר התווסף בהתקן HTML5, אלמנט ה Canvas משמש לבניית אתרים אינטראקטיביים ומקצועיים הרבה יותר מאשר קודם לכן, גלישה באינטרנט מאפשר חוויה של ממש ולא עוד דף תוכן משעמם.
מדוע כדאי להשתמש ב Canvas
רבים יטענו כי זוהי עבודה יתרה ולא מועילה אשר בשביל ליצור אובייקטים פשוטים יש צורך בשימוש באלמנט כה מסובך הדורש רבות מהמשתמש, אך זאת רק אם היינכם משתמשים באלמנט ה Canvas ליצירת אובייקטים פשוטים כאשר אפשר ליצור אותם בפשטות רבה ללא אלמנט זה, שימוש ב Canvas נועד לציור אובייקטים דינמיים.
התמקצעות באלמנט
- צבע ברירת מחדל לכל צורה הינו שחור, לאחר מכן ניתן לבחור צבעים בהתאם לצורך.
- קיימים שני סוגי הקשרים כרגע ב Canvas, הקשר ה webgl ו 2d, כאשר 2d הינו הפופולארי יותר בעוד webgl הינו הקשר אשר מטרתו לבצע רינדור תלת מימדי באלמנט ה Canvas.
- כל אלמנט Canvas מתחיל בתור אלמנט ריק עד שהינו מגדירים אותו ומעצבים אותו, פעולה אשר מאפשרת לא להציג אותו על הדף לפני שבוצע עליו שינוי כלשהו.
- לא תמיד האלמנט יציג רזולוציה יציבה לאחר רינדור.
סרטון קצר זה יציג בפניכם דרכים בסיסיות ליצירת אנימציה באמצעות אלמנט ה Canvas.
דפדפנים תומכים
אם ברצונכם לעשות שימוש ביצירת גרפיקה באמצעות Canvas זכרו שאלמנט זה רספונסיבי לדפדפנים בגרסאות הבאות;
- Internet Explorer 9
- Firefox 3.0 +
- Chrome 3.0 +
- Safari 3.0 +
- Opera 10.0 +
- I Phone 1.0 +
- Android 1.0 +
תכונות ליצירת מלבנים באלמנט ה Canvas
- הערך "fillStyle” אשר במצב ברירת מחדל שלו היינו בצבע שחור ויכול להשתנות לכל דבר אחר לפי רצון המשתמש, יכול להיות צבע CSS, תבנית, או מדרון.
- הערך "fillRect” (רוחב, גובה, X, Y) – מטרתו היא למלאות את המלבן המאוייר בסגנון המתבקש.
- הערך "clearRect” (רוחב, גובה, X, Y) – מנקה את הפיקסלים מהמלבן הנ"ל.
- הערך "strokeStyle” יכול להתנהל כמו ערך ה"fillStyle” ולתפקד כצבע CSS, תבנית או מדרון.
עוד בקטגורייה:
מה הלקוחות אומרים עלינו?
מתעניין בבניית אתר?
בניית אתרים בהתאמה אישית