HTML 5 Canvas – מבוא

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

במאמר זה אדגים את השימושים שאפשר לעשות ב-HTML 5 Canvas.

שלב ראשון – יצירת אלמנט Canvas

יצירת אלמנט ה-Canvas היא פשוטה למדי, זה הולך כך:

<canvas id="myCanvas" width="300" height="150">
תוכן שייראה לדפדפנים שאינם תומכים ב-Canvas. כמו אינטרנט אקספלורר למשל.
</canvas>

עכשיו יש לנו אלמנט Canvas שאפשר לצייר בו. שימו לב שנתתי לו id על מנת לגשת אליו בצורה נוחה. לא חייבים לשים את ה-id הזה כמובן…

שלב שני – אתחול ה-Canvas ב-JavaScript

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

<script type="text/javascript">
// Get a reference to the element.
var elem = document.getElementById('myCanvas');
// בדיקה אם האלמנט אכן קיים כדי להמנע משגיאת ג'אווה סקריפט אם מדובר בדפדפן אינטרנט אקספלורר 
if (elem && elem.getContext) {
  // התחלת ההתממשקות ל-context
  var context = elem.getContext('2d');
  if (context) {
    // כאן אפשר להתחיל ולכתוב את הצורה.

  }
}
</script>

2D context API

אחרי שהכנו הכל, הגיע הזמן להשתמש ב-2D context API על מנת ליצור את הצורות שאנו רוצים. 2D context API הוא הממשק שלנו ליצירת כל מה שאנו רוצים.

ריבוע

הצורה הבסיסית ביותר היא ריבוע וב-2D context API יש לנו שלושה כאלו. שני הפשוטים מביניהם הם fillRect שבו נשתמש כעת. כל מה שצריך לעשות זה לציין את ה-X שממנו הוא מתחיל ואת ה-Y שממנו הוא מתחיל כאשר הפםינה השמאלית עליונה היא X=0 ו Y=0 ואת הרוחב והגובה שלו בפיקסלים. בדוגמא הבאה אני אשתמש בריבוע שיתחיל ב X=0 וב-Y=0 ושרוחבו יהיה 150 וגובהו יהיה 100.

Your browser does not have support for Canvas.

איך עשיתי את זה? פשוט מאד: בעזרת הקוד הבא:

var elem = document.getElementById('myCanvas');
  // התחלת ההתממשקות ל-context
  var context = elem.getContext('2d');
  if (context) {
 context.fillStyle = '#00f';
  context.fillRect(0, 0, 150, 100);
}

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

אם אני אשתמש בסוג הריבוע השני, strokeRect, אני אצטרך להגדיר לו צבע גבול כמובן והנה הדוגמא:

Your browser does not have support for Canvas.

כאן אני יוצר ריבוע עם מסגרת אדומה ושפינתו השמאלית תהיה ב X=0 וב Y=60.

<script type="text/javascript">
var elem = document.getElementById('myCanvas2');
  // התחלת ההתממשקות ל-context
  var context = elem.getContext('2d');
  if (context) {
  context.strokeStyle = '#f00'; // red
  context.strokeRect(0,  60, 150, 50);
}
</script>

אפשר לשלב כמובן כמה וכמה צורות שרוצים כמו למשל:

Your browser does not have support for Canvas.

והקוד נראה כך:

<script type="text/javascript">
var elem = document.getElementById('myCanvas3');
  // התחלת ההתממשקות ל-context
  var context = elem.getContext('2d');
  if (context) {
  context.fillStyle   = '#00f'; // blue
  context.strokeStyle = '#f00'; // red
  context.lineWidth   = 4;

  // Draw some rectangles.
  // Arguments: x, y, width, height
  context.fillRect  (0,   0, 150, 50);
  context.strokeRect(0,  60, 150, 50);
  context.clearRect (30, 25,  90, 60);
  context.strokeRect(30, 25,  90, 60);

}
</script>

צורות נוספות

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

ראשית, בואו נקבע שהמשולש שלנו יהיה בצבע כחול עם שוליים אדומים ברוחב של 4 פיקסלים. נכון, הוא עדיין לא קיים אבל יש לנו כבר את השם שלו שהוא השם שבו אני תמיד משתמש – context.

<script type="text/javascript">
var elem = document.getElementById('myCanvas3');
  // התחלת ההתממשקות ל-context
  var context = elem.getContext('2d');
  if (context) {
context.fillStyle   = '#00f';
context.strokeStyle = '#f00';
context.lineWidth   = 4;

}
</script>

עכשיו נתחיל לצייר. על מנת להשתמש ב-path אנחנו צריכים להשתמש ב-context.beginPath();.

<script type="text/javascript">
var elem = document.getElementById('myCanvas3');
  // התחלת ההתממשקות ל-context
  var context = elem.getContext('2d');
  if (context) {
context.fillStyle   = '#00f';
context.strokeStyle = '#f00';
context.lineWidth   = 4;

// הציור עצמו
context.beginPath();

}
</script>

מאיפה אנחנו רוצים להתחיל את הציור שלנו? ה-canvas שלנו מתחיל מהפינה השמאלית עליונה כאשר היא מוגדרת כ X=0 ו-Y=0. בואו ונתחיל מ Y=10 ו-X=10 לשם כך אנחנו צריכים להזיז את העט הדמיוני שלנו לנקודה הזו. איך עושים את זה? באמצעות context.moveTo(10, 10);

<script type="text/javascript">
var elem = document.getElementById('myCanvas3');
  // התחלת ההתממשקות ל-context
  var context = elem.getContext('2d');
  if (context) {
context.fillStyle   = '#00f';
context.strokeStyle = '#f00';
context.lineWidth   = 4;

// הציור עצמו
context.beginPath();
context.moveTo(10, 10);
}
</script>

ועכשיו צריך להזיז את העט אבל תוך כדי ציור. את זה עושים באמצעות context.lineTo על מנת ליצור משולש אנו צריכים לעשות את הדבר הבא:

<script type="text/javascript">
var elem = document.getElementById('myCanvas3');
  // התחלת ההתממשקות ל-context
  var context = elem.getContext('2d');
  if (context) {
context.fillStyle   = '#00f';
context.strokeStyle = '#f00';
context.lineWidth   = 4;

// הציור עצמו
context.beginPath();
context.moveTo(10, 10);
context.lineTo(100, 10);
context.lineTo(10, 100);
context.lineTo(10, 10);
}
</script>

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

context.fill();
context.stroke();

context.closePath();

<script type="text/javascript">
var elem = document.getElementById('myCanvas4');
  // התחלת ההתממשקות ל-context
  var context = elem.getContext('2d');
  if (context) {
context.fillStyle   = '#00f';
context.strokeStyle = '#f00';
context.lineWidth   = 4;
// הציור עצמו
context.beginPath();
context.moveTo(10, 10);
context.lineTo(100, 10);
context.lineTo(10, 100);
context.lineTo(10, 10);
//סגירה
context.fill();
context.stroke();
context.closePath();
}
</script>

וכך זה נראה:

Your browser does not have support for Canvas.

סיכום

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

במאמר הבא אנו לומדים על אפקטים ב-HTML 5 Canvas.