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

HTML 5 Canvas – אפקטים

רן בר-זיק פברואר 14, 2009 12:13 am אין תגובות

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

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

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

בואו וניצור צורה של מגן דוד, זה לא אמור להיות מאד קשה, פשוט שני משולשים:



Your browser does not have support for Canvas.

והנה קוד המקור:


<script type="text/javascript"> 
var elem = document.getElementById('myCanvas1');
  // התחלת ההתממשקות ל-context
  var context = elem.getContext('2d');
  if (context) {
  context.fillStyle   = '#ffffff'; // White
  context.strokeStyle = '#00f'; // Blue
  context.lineWidth   = 4;
  // Draw some rectangles.
  // Arguments: x, y
context.beginPath();
// משולש ראשון
context.moveTo(50, 100); 
context.lineTo(100, 100);
context.lineTo(75, 25);
context.lineTo(50, 100);
// משולש שני
context.moveTo(75, 125);
context.lineTo(100, 50);
context.lineTo(50, 50);
context.lineTo(75, 125);
// סגירה
context.fill();
context.stroke();
context.closePath();
}
</script>


נניח ואני רוצה להפוך את מגן הדוד שלי לקצת יותר צבעוני, למה שלא נעשה לו Gradient? זה קל ופשוט ביותר עם Canvas API. כל מה שצריך לעשות זה להגדיר את תחנות העצירה. נניח ואני רוצה Gradient בכל צבעי הקשת. כל מה שאני צריך לעשות זה לקבוע שלוש תחנות עצירה – הראשונה ב-0% (צבע בסיס אדום), השניה ב-50% (צבע בסיס צהוב) והשלישית בסוף (צבע בסיס כחול) מה שיוצא זה צבעי הקשת. אני מתאר לעצמי שזה די מובן למי שמכיר פוטושופ, אם זה נשמע כמו ג'יבריש, פשוט תסתכלו על הקוד.

את זה עושים באמצעות קביעת משתנה Gradient והגדרות שלוש תחנות העצירה.


var gradient1 = context.createLinearGradient(sx, sy, dx, dy);
gradient1.addColorStop(0,   '#f00'); // red
gradient1.addColorStop(0.5, '#ff0'); // yellow
gradient1.addColorStop(1,   '#00f'); // blue

ה-sx, sy הם הנקודה שבה ה-Gradient מתחיל וה-dx, dy הם הנקודה שבה הוא מסתיים, ואם אני אשלב את זה בקוד שלי, מה שיצא זה:



Your browser does not have support for Canvas.

והנה הקוד שיצר את כל זה:


<script type="text/javascript"> 
var elem = document.getElementById('myCanvas4');
  // התחלת ההתממשקות ל-context
  var context = elem.getContext('2d');
  if (context) {
  context.fillStyle   = gradient1;
  context.strokeStyle = '#00f'; // Blue
  context.lineWidth   = 1;
var gradient1 = context.createLinearGradient(0,0,0,150);
gradient1.addColorStop(0,   '#f00'); // red
gradient1.addColorStop(0.5, '#ff0'); // yellow
gradient1.addColorStop(1,   '#00f'); // blue
  context.fillStyle   = gradient1;
  // Arguments: x, y
context.beginPath();
// משולש ראשון
context.moveTo(50, 100); 
context.lineTo(100, 100);
context.lineTo(75, 25);
context.lineTo(50, 100);
// משולש שני
context.moveTo(75, 125);
context.lineTo(100, 50);
context.lineTo(50, 50);
context.lineTo(75, 125);
// סגירה
context.fill();
context.stroke();
context.closePath();
}
</script>


עוד סוג של Gradient הוא Radial Gradiant שהוא בפירוש מגניב ביותר, במיוחד אם משתמשים בו יחד עם שקיפות (על שקיפות במאמר הבא). באופן עקרוני הוא לא שונה מיצירת Gradient רגיל רק שמשתמשים ב createRadialGradient(x1,y1,r1,x2,y2,r2) כשה-x וה-y מראים את מיקום העיגול וה-r הוא הרדיוס וכמובן שיש לנו שני עיגולים. כמובן שבלי דוגמא אי אפשר אז:

והנה הקוד:


<script type="text/javascript">
var ctx = document.getElementById('canvas').getContext('2d');
// Create gradients
var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
radgrad.addColorStop(0, '#A7D30C');
radgrad.addColorStop(0.9, '#019F62');
radgrad.addColorStop(1, 'rgba(1,159,98,0)');
// draw shape
ctx.fillStyle = radgrad;
ctx.fillRect(0,0,150,150);
</script>


צל

צל הוא אחת האפשרויות היותר מעניינות ושימושיות. נכון לכתיבת מאמר זה הוא נתמך אך ורק ב-Konquerer וב- FireFox 3.1 (שנמצא בשלבי בטא). אך סביר להניח שבגרסאות הבאות של כרום ואופרה (וכמובן אינטרנט אקספלורר, מתישהו) הוא ייתמך. באופן עקרוני, צל הוא פשוט וקל, כל מה שצריך זה להוסיף לצורה שלי שלושה מאפיינים: shadowOffsetX ו – shadowOffsetY שקובעים איפה ה-offset יהיה ו shadowBlur שקובע את רמת החדות של הצל. וזה עובד ככה:



Your browser does not have support for Canvas.

איך עושים את זה? פשוט ביותר:


<script type="text/javascript"> 
var elem = document.getElementById('myCanvas2');
  // התחלת ההתממשקות ל-context
  var context = elem.getContext('2d');
  if (context) {
  context.fillStyle   = '#ffffff'; // White
  context.strokeStyle = '#00f'; // Blue
  context.lineWidth   = 4;
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 2;
context.shadowColor = "rgba(0, 0, 0, 0.5)";
  // Arguments: x, y
context.beginPath();
// משולש ראשון
context.moveTo(50, 100); 
context.lineTo(100, 100);
context.lineTo(75, 25);
context.lineTo(50, 100);
// משולש שני
context.moveTo(75, 125);
context.lineTo(100, 50);
context.lineTo(50, 50);
context.lineTo(75, 125);
// סגירה
context.fill();
context.stroke();
context.closePath();
}
</script>

סיכום

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

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

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