HTML 5 Canvas – אפקטים

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