אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » HTML 5 » HTML 5 Canvas – מבוא

HTML 5 Canvas – מבוא

רן בר-זיק פברואר 9, 2009 4:55 pm אין תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

אחת מהתכונות המעניינות יותר של 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.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
»HTML 5 – העתיד
»HTML 5 Canvas – אפקטים
HTML 5 בניית אתרי אינטרנט סקריפטים
ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד