HTML 5 Canvas – אפקטים

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

מאמר זה הוא מאמר המשך למאמר הקודם על 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 אני מדגים עבודה עם תמונות ופילטרים.

פוסטים נוספים שכדאי לקרוא

תמונה של עציץ, רספברי פיי ורמקול
רספברי פיי

לגרום לעציץ שלכם לדבר

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

DALL·E 2024-09-06 12.34.24 - A visually engaging post about Python and cryptographic problems. The image should feature a dark-themed background with a glowing, futuristic Python
פתרונות ומאמרים על פיתוח אינטרנט

בעיות במימוש של פונקציות קריפטוגרפיות בפייתון

היום (16 לספטמבר) ממש, אני מעביר הרצאה ב-PyconIL 2024 על בעיות קריפטוגרפיות באפליקציות פייתון. לצערי אי אפשר להכניס את כל הבעיות הקריפטוגרפיות להרצאה אחת או

רספברי פיי

מה זה AIoT? ואיך אפשר להתחיל?

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

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