HTML5 - Canvas

פורסם בתאריך Jan 16 2012, 08:11 AM על ידי Shlomo | ישנם 0 תגובות

בהמשך לפוסטים על HTML5, הפעם נדבר על Canavs.

הקדמה:

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

כמובן שאי אפשר במסגרת פוסט זה להכיר את היכולות המלאות, (וזה גם דורש המון מטמטיקה), ואני די בטוח שיהיו (או שיש) עטיפות שונות ליכולות ה - Canvas כדי להקל את הכתיבה, ולא לכתוב כל כך קרוב לברזלים, ובכל זאת נרצה לראות את הבסיס ואיך משתמשים בזה.

Canvas:

ה - Canvas הוא בד ציור המאפשר לנו לצייר עליו מה שנרצה ב - javascript, הוא מכיל את כל היכולות הבסיסיות של ציור כמו ריבוע עיגול קו וכדו', הוא מאפשר לנו להפעיל טרנספורמציות עליו כמו סיבוב, שכפול של אלמנטים, והוא מאפשר להגדיר שקיפות וגרדיאנטים של רקעים וכן הלאה.

מנגנון ה - Canvas הוא בזיכרון, כלומר - לאחר שציירנו ריבוע לא ניתן לשנות את צבע הקו - אפשר רק למחוק אותו (על ידי ציור ריבוע לבן מעליו) ולצייר מחדש.

נקודה נוספת, ה - Canvas מצייר פיקסלים, שינוי ברזולוציה של המסך יעוות את הציור כמו כל תמונה פיקסלית.

דוגמאות לשימוש ב - Canvas: (הדוגמאות יעבדו כמובן רק בדפדפנים תומכי Canvas)

משחק Pinball

Canvas Zoom

יוצר קבצי ico

יצירת תמונה באנימציה

מלא דוגמאות נוספות

איך מתחילים:

בקוד ה - HTML נוסיף אלמנט Canvas

<canvas id="can1" width="400" height="400"></canvas>

בקוד ה - js נקבל את האלמנט, נבקש את ה - Context המאפשר לצייר עליו.

onload = function () {
    var canvas = document.getElementById('can1');
    var ctx = canvas.getContext('2d');
}

לאחר קבלת ה - context ניתן להתחיל להשתמש בפונקציות שלו כדי לצייר.

var x = 0, y = 0, width = 100, height = 100;
ctx.fillRect(x, y, width, height);

נקבל ריבוע שחור בפינה הימנית עליונה של ה - Canvas בגודל 100 על 100.

במידה ונוסיף את השורה הבאה (לפני קריאת ל - fillRect)

ctx.fillStyle = 'rgb(200,200,200)';

נקבל את הריבוע בצבע אפור.

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

הקוד הבא יצייר מין צורה של ענן.

// begin custom shape
ctx.beginPath(); 
ctx.moveTo(170, 80);
ctx.bezierCurveTo(130, 100, 130, 150, 230, 150);
ctx.bezierCurveTo(250, 180, 320, 180, 340, 150);
ctx.bezierCurveTo(420, 150, 420, 120, 390, 100);
ctx.bezierCurveTo(430, 40, 370, 30, 340, 50);
ctx.bezierCurveTo(320, 5, 250, 20, 250, 50);
ctx.bezierCurveTo(200, 5, 150, 20, 170, 80);
ctx.closePath();
// complete custom shape
 
ctx.lineWidth = 5;
ctx.strokeStyle = "#0000ff";
ctx.stroke();

כעת אם נוסיף (לפני השורה של lineWidth) את השורות הבאות:

var grd = ctx.createRadialGradient(238, 50, 10, 238, 50, 200);
grd.addColorStop(0, "#7944FF"); // light blue
grd.addColorStop(0.5, "#FF8928"); // light blue
grd.addColorStop(1, "#42FFCC"); // dark blue
ctx.fillStyle = grd;
ctx.fill();

נקבל:

ואם ממש נתפרע ונכתוב את הקוד הבא:

setInterval(function () {
    var grd = ctx.createRadialGradient(Math.floor((Math.random() * 255)),
                                        Math.floor((Math.random() * 255)),
                                        Math.floor((Math.random() * 255)),
                                        Math.floor((Math.random() * 255)),
                                        Math.floor((Math.random() * 255)),
                                        Math.floor((Math.random() * 255)));
 
    grd.addColorStop(0, "#7944FF"); // light blue
    grd.addColorStop(0.5, "#FF8928"); // light blue
    grd.addColorStop(1, "#42FFCC"); // dark blue
    ctx.fillStyle = grd;
    ctx.fill();
}, 200);

נקבל אנימציה מעניינת של צורות שונות של הרקע (במידה וניתן ערכים אקראיים לצבע - נקבל גם צבעים שונים)

סיכום:

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

תגים:DEV, JavaScript, html, html5

שלמה גולדברג (הרב דוטנט)

מרצה בסלע ויועץ בעולם ה - net.

תגיות

ארכיון

ניווט

HTML5 - Canvas

רשימת תגובות

שלח תגובה