מדריך HTML5 – ציור על קאנבאס (התגית canvas)

רן בר-זיק ‏ • Internet Israel

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

בואו ונדגים! ראשית ניצור דף HTML ובו יש אלמנט canvas:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>HTML 5 site</title>
    </head>
    <body>
    <canvas id="myCanvas" width="300" height="150">
    הדפדפן שלך אינו תומך ב-HTML 5
    </canvas>
    </body>
</html>

כפי שאנו רואים, מדובר באלמנט פשוט מאד. בין התגית הפותחת והסוגרת אנו מציבים תוכן שדפדפנים מיושנים יותר יראו. לאלמנט יש גובה ורוחב (ניתן לקבוע את זה גם על ידי CSS) ו-id. ה-id ישמש אותנו על מנת להתממשק לקאנבאס.

המשחק האמיתי מתרחש בסקריפט. שם אנו מתממשקים ל-API ומציירים את מה שאנו רוצים. בואו ונצייר ריבוע:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>HTML 5 site</title>
    </head>
    <body>
    <canvas id="myCanvas" width="300" height="150">
    הדפדפן שלך אינו תומך ב-HTML 5
    </canvas>
    <script>
        var elem = document.getElementById('myCanvas');
        var ctx = elem.getContext('2d');
        ctx.fillStyle = '#00f';
        ctx.fillRect(0, 0, 150, 100);
    </script>
    </body>
</html>

וכך זה יראה:

ריבוע בקאנבאס

4 שורות בלבד ויצרתי ריבוע. איך עשיתי את זה? ראשית יצרתי רפרנס לאלמנט ה-canvas באמצעות getElementById, אחרי כן השתמשתי במתודת getContext כדי לקבל את הקונטקסט ואת הגישה ל-API. מכאן יש לי צורך רק להשתמש במתודות שהוגדרות ב-API. במקרה הזה קביעת ה-fillStyle ואז יצירת הריבוע בקוארדינטות שקבעתי.

אפשר להתפרע וליצור עוד ריבועים – כל עוד אני ממשיך להתממשק ל-API. הנה דוגמא:

<script>
    var elem = document.getElementById('myCanvas');
    var ctx = elem.getContext('2d');
    // Draw black rect
    ctx.fillRect(50, 20, 145, 145);
    
    // Draw blue rect
    ctx.fillStyle = "rgb(0, 162, 232)";
    ctx.fillRect(135, 85, 125, 125);
    
    // Increase line width
    ctx.lineWidth = 5;
    
    // Draw black rect outline
    ctx.strokeStyle = "rgb(0, 0, 0)";
    ctx.strokeRect(50, 335, 145, 145);
    
    // Draw blue rect outline
    ctx.strokeStyle = "rgb(0, 162, 232)";
    ctx.strokeRect(135, 275, 125, 125);
    
    // Draw transparent yellow rect
    ctx.fillStyle = "rgba(255, 255, 0, 0.75)";
    ctx.fillRect(210, 180, 125, 125);
</script>

והנה התוצאה:

עוד דוגמא ל-canvas

ישנן מתודות רבות ליצירת צורות וקווים, הנה ה-API המלא המופיע ב-MSDN:

http://msdn.microsoft.com/library/ff975057.aspx

לא חייבים לצייר רק ריבועים, עיגולים או קשתות, אפשר לייצר טקסט:

<script>
    var elem = document.getElementById('myCanvas');
    var ctx = elem.getContext('2d');
    ctx.font = '60px "Segoe UI" bold';
    ctx.strokeText("לימוד קאנבאס", 0, 160);
    ctx.restore();
</script>

וכך זה יראה:

HTML5 Canvas

אפשר לעשות כל מה שרוצים באמצעות Canvas, אם אפשר לעשות את זה ב-JavaScript, אפשר לעשות את זה ב-Canvas. לצורך העניין אפשר לעשות אנימציה, או לקחת וידאו ולרנדר אותו מחדש באמצעות canvas. הנה דוגמא ממש מרהיבה למה שאפשר לעשות עם וידאו ו-Canvas:

http://www.craftymind.com/factory/html5video/CanvasVideo.html

Canvas and video

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

תגיות: HTML5, מדריך, פיתוח

מדריך HTML5

מדריך HTML5 – ציור על קאנבאס (התגית canvas)

עוד בנושא זה

תגובות בפייסבוק

תגיות