עמרי לאונגר – Alink.co.il

HTML5 הביא איתו בשורה משמחת למפתחי האתרים,

למען האמת, לא רק אחת, אבל אחת (לדעתי) משמחת במיוחד.

במילה אחת: גרפיקה, בשתי מילים: גרפיקה ווקטורית

נכון, דפי הHTML נהנו לא מהיום מאפשרות להוסיף תמונות, אנימציות פלאש ואפילו למי שהתעקש במיוחד ניתן היה להשתמש בSVG בשביל לצייר קווים שונים ומשונים על גבי הדף. אבל זה לא היה מספיק ובמיוחד – לא תקני בצורה אחידה לכל הדפדפנים.

בHTML5 יש לנו קנבס, מה ניתן לעשות איתו? הכל!

נתחיל במהו קנבס?

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

נתחיל מיצירת האלמנט בתוך דף הHTML שלנו:

<canvas id="myCanvas" width="220" height="180">
    Your browser does not have support for Canvas
</canvas>

מ

כאמור – אלמנט פשוט עם אטריביוטים רגילים לחלוטין כפי שאנחנו מכירים מכל אלמנט HTML אחר.

עכשיו נעבור לחלק האומנותי:

window.addEventListener('load', function () {

  // Get the canvas element.

  var elem = document.getElementById('myCanvas');

  if (!elem || !elem.getContext) {

    return;

  }


 השתמשנו באירוע הטעינה של הדף 


והצמדנו אליו פונקציה לבדיקה שאכן נוצר לנו אובייקט קנבס 


  ושיש לנו סיבה להמשיך מבלי להעיף הודעות שגיאה לכל עבר.  


אנחנו ממשיכים ליצירת ספקטרום של צבעים בו נשתמש מאוחר יותר:

var color, hue = [

    [255,   0,   0 ], // 0, Red,       0°

    [255, 255,   0 ], // 1, Yellow,   60°

    [  0, 255,   0 ], // 2, Green,   120°

    [  0, 255, 255 ], // 3, Cyan,    180°

    [  0,   0, 255 ], // 4, Blue,    240°

    [255,   0, 255 ], // 5, Magenta, 300°

    [255,   0,   0]], // 6, Red,     360°

 אנחנו מייצרים צורה גראדיינית:
gradient = context.createLinearGradient(0, 0, elem.width, 0);

 מוסיפים את הצבעים:
gradient = context.createLinearGradient(0, 0, elem.width, 0);
for (var i = 0; i <= 6; i++) {
    color = 'rgb(' + hue[i][0] + ', ' + hue[i][1] + ', ' + hue[i][2] + ')';
    gradient.addColorStop(i * 1/6, color);
  }

 ציור של אלמנט מצולע עם הצללה:

context.shadowOffsetX = 5;

  context.shadowOffsetY = 5;

  context.shadowBlur    = 4;

  context.shadowColor   = 'rgba(0, 0, 0, 0.5)';

  context.fillRect(5, 5, 200, 100);

 שימוש בטקסט בתוך הקנבס:
context.font = 'bold 36px sans-serif';
context.textBaseline = 'top';
context.fillText('!שלום עולם', 25, 120, 200);
context.strokeText('!שלום עולם', 25, 120, 200);



 והתוצר הסופי אמור להראות כך:

ניתן לראות דוגמא חיה כאן: http://alink.co.il/html5/hello

מבוסס על מדריך שנלקח מהאתר הזה: http://www.robodesign.ro/coding/canvas-primer/20081208/